Skip to content

Instantly share code, notes, and snippets.

@markhowellsmead

markhowellsmead/really-right-breakpoints.less

Created December 21, 2016 16:42
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save markhowellsmead/9084c509fcfd4b829f98d72b8bd88b3e to your computer and use it in GitHub Desktop.
Save markhowellsmead/9084c509fcfd4b829f98d72b8bd88b3e to your computer and use it in GitHub Desktop.
Download ZIP
The 100% correct way to do CSS breakpoints - LESS variables
Raw
really-right-breakpoints.less
/*
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