Media Queries Setups.md

Media Queries Setup-1

Phone	Tablet portrait	Tablet landscape	Defaults	Big desktop
phone	tab-port	tab-land	current	Big desktop
0 - 600px	600 - 900px	900 - 1200px	1200 - 1800	1800px +

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

Breakpoint mixin

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

Usage

@include respond(tab-port) {
  // code
}