Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save gearsandcode/e37f6dfec7da2b84a95dbc47cb9cbf71 to your computer and use it in GitHub Desktop.
Save gearsandcode/e37f6dfec7da2b84a95dbc47cb9cbf71 to your computer and use it in GitHub Desktop.
CSS media queries based on the breakpoint guidance published by the Material Design team. http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoint
/* Material Design Adaptive Breakpoints */
/*
Below you'll find CSS media queries based on the breakpoint guidance
published by the Material Design team. You can choose to use, customise
or remove these breakpoints based on your needs.
http://www.google.com/design/spec/layout/adaptive-ui.html#adaptive-ui-breakpoints
*/
/* mobile-small */
@media all and (min-width: 0) and (max-width: 360px) and (orientation: portrait) { }
/* mobile-large */
@media all and (min-width: 361px) and (orientation: portrait) { }
/* mobile-small-landscape */
@media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
/* mobile-large-landscape */
@media all and (min-width: 481px) and (orientation: landscape) { }
/* tablet-small-landscape */
@media all and (min-width: 600px) and (max-width: 960px) and (orientation: landscape) { }
/* tablet-large-landscape */
@media all and (min-width: 961px) and (orientation: landscape) { }
/* tablet-small */
@media all and (min-width: 600px) and (orientation: portrait) { }
/* tablet-large */
@media all and (min-width: 601px) and (max-width: 840px) and (orientation : portrait) { }
/* desktop-x-small-landscape */
@media all and (min-width: 0) and (max-width: 480px) and (orientation: landscape) { }
/* desktop-x-small */
@media all and (min-width: 0) and (max-width: 480px) and (max-aspect-ratio: 4/3) { }
/* desktop-small-landscape */
@media all and (min-width: 481px) and (max-width: 840px) and (orientation: landscape) { }
/* desktop-small */
@media all and (min-width: 481px) and (max-width: 840px) and (max-aspect-ratio: 4/3) { }
/* desktop-medium-landscape */
@media all and (min-width: 841px) and (max-width: 1280px) and (orientation: landscape) { }
/* desktop-medium */
@media all and (min-width: 841px) and (max-width: 1280px) and (max-aspect-ratio: 4/3) { }
/* desktop-large */
@media all and (min-width: 1281px) and (max-width: 1600px) { }
/* desktop-xlarge */
@media all and (min-width: 1601px) and (max-width: 1920px) { }
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment