Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save nurbek-ab/efc407ec15f77b56c8cb9cff6787802a to your computer and use it in GitHub Desktop.
Save nurbek-ab/efc407ec15f77b56c8cb9cff6787802a to your computer and use it in GitHub Desktop.
The 100% correct way to do CSS breakpoints - LESS variables
/*
Thanks David <3 - https://medium.freecodecamp.com/the-100-correct-way-to-do-css-breakpoints-88d6a5ba1862
*/
@for-phone: ~"screen and (max-width: 44.9375rem)"; // < 720
@for-tablet-only: ~"screen and (min-width: 45rem) and (max-width: 74.9375rem)"; // > 720 < 1199
@for-tablet-portrait-only: ~"screen and (min-width: 45rem) and (max-width: 56.1875rem)"; // > 720 < 900
@for-tablet-portrait-up: ~"screen and (min-width: 45rem)"; // > 720
@for-tablet-landscape-up: ~"screen and (min-width: 56.25rem)"; // > 900
@for-desktop-up: ~"screen and (min-width: 75rem)"; // > 1200
@for-big-desktop-up: ~"screen and (min-width: 112.5rem)"; // > 1800
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment