Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save DevotionGeo/efb57a6801ad08240db0a91989b8d2cb to your computer and use it in GitHub Desktop.
Save DevotionGeo/efb57a6801ad08240db0a91989b8d2cb 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