Sass Breakpoints Mixin in EM
/*
Used like this:
@include breakpoint('mobile-up) {
//Content Here
}
*/
// Breakpoints Map
$breakpoints: (
'small' : 'only screen and (max-width : 20em)', // 0 < 320px
'mobile' : 'only screen and (min-width : 20.0625em) and (max-width : 47.9375em)', // 321px < 767px
'mobile-up' : 'only screen and (min-width : 20.0625em)', // 321px <
'mobile-down' : 'only screen and (max-width : 47.9375em)', // 0 < 767px
'tablet' : 'only screen and (min-width : 48em) and (max-width : 64em)', // 768px < 1024px
'tablet-up' : 'only screen and (min-width : 48em)', // 768px <
'tablet-down' : 'only screen and (max-width : 64em)', // 0 < 1024px
'tablet-desktop-sm' : 'only screen and (min-width : 48em) and (max-width : 74.9375em)', // 768px < 1199px
'desktop-up' : 'only screen and (min-width : 64.0625em)', // 1025px <
'desktop-sm' : 'only screen and (min-width : 64.0625em) and (max-width: 74.9375em)', // 1025px < 1199px
'desktop-lg-up' : 'only screen and (min-width : 75em)', // 1200px <
'portrait' : 'only screen and (max-width: 1023px) and (orientation : portrait)',
'landscape' : 'only screen and (orientation : landscape)',
'retina' : 'only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dppx)'
);
/**
* Used to set media queries throughout the app.
* @param {String} $size mobile, mobile-down, tablet, etc.
*/
@mixin breakpoint($size) {
@if $is-ie8-stylesheet {
@if $size == 'desktop-up' or $size == 'desktop-lg-up' or $size == 'tablet-up' or $size == 'landscape' {
@content;
}
}
@else {
$mq: map-get($breakpoints, $size);
@media #{$mq} { @content; }
}
}