Media query basic breakpoint

Media query manager

Those breakpoints are what I prefer to using.

Standard

breakpoints
- 0 - 600px : phone
- 600 - 900px : Tablet portrait
- 900 - 1200px : Tablet landscape
- 1200 - 1800 : is where our normal styles apply
- 1800px+ : Big desktop
$breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop

ORDER: Base + typography > general layout + grid > page layout > components

1rem = 16px

rem is best option for media query

Example

Breakpoint variable (<project-root>/sass/abstracts/_mixins.scss)

// MEDIA QUERY MANAGER

/*
0 - 600px:     phone
600 - 900px:   Tablet portrait 
900 - 1200px:  Tablet landscape
[1200 - 1800]: is where our normal styles apply
1800px + :     Big desktop
*/

/*
$breakpoint argument choices:
- phone
- tab-port
- tab-land
- big-desktop
ORDER: Base + typography > general layout + grid > page layout > components
1em = 16px
[em] is best option for media query
*/

@mixin respond($breakpoint) {
  @if $breakpoint == phone {
    @media (max-width: 37.5em) {
      //600px
      @content;
    }
  }
  @if $breakpoint == tab-port {
    @media (max-width: 56.25em) {
      //900px
      @content;
    }
  }
  @if ($breakpoint == tab-land) {
    @media (max-width: 75em) {
      //1200px
      @content;
    }
  }
  @if ($breakpoint == big-desktop) {
    @media (min-width: 112.5em) {
      //1800px
      @content;
    }
  }
}

Include breakpoint (?.scss) ex:

 @include respond(tab-port) {
    padding: 20rem 0rem;
  }

Reference

Implement project: https://github.com/barrystone/natours/blob/master/sass/abstracts/_mixins.scss
Teacher: Jonas Schmedtmann

Media query basic breakpoint

Media query manager

Standard

Example

Reference

Read more

hackMD_public-notes

Barry Shi(barrystone)'s Tech skill

git cmd

VS code Snippets