Skip to content

Instantly share code, notes, and snippets.

@eyecatchup

eyecatchup/material-design-breakpoints.css

Last active December 4, 2020 20:08
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save eyecatchup/9e847b05f15efccc1a29 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save eyecatchup/9e847b05f15efccc1a29 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. eyecatchup revised this gist Mar 11, 2016. No changes.
  2. eyecatchup created this gist Mar 11, 2016.
    42 changes: 42 additions & 0 deletions material-design-breakpoints.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,42 @@
    /* 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) { }