Skip to content

Instantly share code, notes, and snippets.

@sethta
Created February 14, 2019 04:52
Show Gist options
  • Save sethta/6e04d0d70e42b0d761e787088f6e0b7c to your computer and use it in GitHub Desktop.
Save sethta/6e04d0d70e42b0d761e787088f6e0b7c to your computer and use it in GitHub Desktop.
Mobile-First Media Queries
// HOW TO USE BREAKPOINT VARIABLES
// `@media #{$desktop} {
// CSS: GOES HERE;
// }`
// Breakpoints (we use pixels so we can still have mobile-last queries)
$tiny-phone-bp: 320px;
$phone-bp: 780px;
$tablet-bp: 900px;
$desktop-bp: 1200px;
$big-desktop-bp: 1800px;
// Mobile-first variables
$tiny-phone-over: '(min-width: #{$tiny-phone-bp + 1})'; // No phone should be smaller than 320px, so yeah...
$phone-over: '(min-width: #{$phone-bp})';
$tablet-over: '(min-width: #{$tablet-bp})';
$desktop-over: '(min-width: #{$desktop-bp})';
$big-desktop-over: '(min-width: #{$big-desktop-bp})';
// Mobile-last variables (subtract a pixel so breakpoints match up)
$phone-under: '(max-width: #{$tiny-phone-bp})';
$tablet-under: '(max-width: #{$phone-bp - 1})';
$desktop-under: '(max-width: #{$tablet-bp - 1})';
$big-desktop-under: '(max-width: #{$desktop-bp - 1})';
$big-desktop-under: '(max-width: #{$big-desktop-bp - 1})';
// Tiny phone media queries
$tiny-phone: 'only screen and #{$phone-under}';
$tiny-phone-only: $tiny-phone; // alias
$over-tiny-phone: 'only screen and #{$tiny-phone-over}';
$not-tiny-phone: $over-tiny-phone; // alias
// Phone media queries (Tiny phone include in phone besides under)
$under-phone: $tiny-phone-only; // alias
$phone: 'only screen and #{$tablet-under}';
$phone-only: $phone; // alias
$over-phone: 'only screen and #{$phone-over}';
$not-phone: $over-phone; // alias
// Portrait tablet media queries
$under-tablet: $phone-only; // alias
$tablet: 'only screen and #{$phone-over}';
$tablet-only: '#{$tablet} and #{$desktop-under}';
$over-tablet: 'only screen and #{$tablet-over}';
$not-tablet: '#{$under-tablet}, #{$over-tablet}';
// Landscape tablet (and small laptop) media queries
$under-desktop: 'only screen and #{$desktop-under}';
$desktop: $over-tablet; // alias
$desktop-only: '#{$desktop} and #{$big-desktop-under}';
$over-desktop: 'only screen and #{$desktop-over}';
$not-desktop: '#{$under-desktop}, #{$over-desktop}';
// Desktop (and large laptop) media queries
$under-desktop: 'only screen and #{$big-desktop-under}';
$big-desktop: $over-desktop; // alias
$big-desktop-only: '#{$big-desktop} and #{$big-desktop-under}';
$over-desktop: 'only screen and #{$big-desktop-over}';
$not-desktop: '#{$under-desktop}, #{$over-desktop}';
// Big monitor media queries
$under-big-desktop: 'only screen and #{$big-desktop-under}';
$big-desktop: $over-desktop; // alias
$big-desktop-only: $big-desktop;
$not-big-desktop: $under-big-desktop;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment