media-queries.scss

/* Available Variables */
$small-screen: em-calc(768);
$medium-screen: em-calc(1280);
$large-screen: em-calc(1440);

$screen: "only screen";
$small: "only screen and (min-width:"#{$small-screen}")";
$medium: "only screen and (min-width:"#{$medium-screen}")";
$large: "only screen and (min-width:"#{$large-screen}")";
$landscape: "only screen and (orientation: landscape)";
$portrait: "only screen and (orientation: portrait)";

/* We use this media query to add styles to any device that supports media queries */
@media #{$screen} { }

/* Used to alter styles for screens at least 768px wide. This is where the grid changes. */
@media #{$small} { }

/* Used to alter styles for screens at least 1280px wide. */
@media #{$medium} { }

/* Used to alter styles for screens at least 1440px wide. */
@media #{$large} { }