Skip to content

Instantly share code, notes, and snippets.

Last active July 30, 2020 09:07
What would you like to do?
// ****************************************/
// Media Queries
// ****************************************/
// Media breakpoints
$mq-desktop-xl: 1680px
$mq-desktop: 1382px
$mq-desktop-small: 1280px
$mq-tablet-landscape: 1024px
$mq-tablet-portrait: 768px
$mq-mobile-landscape: 520px
$mq-mobile-portrait: 320px
// Don't change these !!
$mq-desktop-xl-up: ($mq-desktop-xl + 1)
$mq-desktop-up: ($mq-desktop + 1)
$mq-tablet-landscape-up: ($mq-tablet-landscape + 1)
$mq-tablet-portrait-up: ($mq-tablet-portrait + 1)
// All XL screens
$xl-desktop-and-up: "(min-width : #{$mq-desktop-xl-up})"
// Everything larger than a regular desktop
$desktop-and-up: "(min-width : #{$mq-desktop-up})"
// Everything larger than a landscape tablet
$tablet-landscape-and-up: "(min-width : #{$mq-tablet-landscape-up})"
// Everything larger than a portrait tablet
$tablet-portrait-and-up: "(min-width : #{$mq-tablet-portrait-up})"
// Everything smaller than small desktop
$small-desktop-and-below: "(max-width : #{$mq-desktop-small})"
// Everything smaller than tablet landscape
$tablet-landscape-and-below: "(max-width : #{$mq-tablet-landscape})"
// Everything below and including the portrait width of the tablet
$tablet-portrait-and-below: "(max-width : #{$mq-tablet-portrait})"
// Landscape tablet and short
$landscape-short: "(max-width : #{$mq-tablet-landscape}) and (min-aspect-ratio: 16/11) and (orientation: landscape)"
// Both mobile portrait and landscape
$mobile-only: "(max-width : #{$mq-mobile-landscape})"
// Just mobile landscape
$mobile-landscape-and-below: "(max-width: #{$mq-mobile-landscape})"
// Just mobile portrait
$mobile-portrait-and-below: "(max-width: #{$mq-mobile-portrait})"
$mobile-up: "(min-width : #{$mq-mobile-landscape})"
// Retina
$retina-only: "(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)"
// -----------------------------------------
// Usage example
// The order is important:
// should be media queries starting with greatest to lowest.
// desktop: notice there aren't any media queries
font-size: 40px
// xl screens (very specific)
@media #{$xl-desktop-and-up}
font-size: 50px
// tablet
@media #{$tablet-landscape-and-below}
font-size: 39px
// mobile
@media #{$mobile-only}
font-size: 36px
// mobile portrait (very specific)
@media #{$mobile-portrait-and-below}
font-size: 35px
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment