Skip to content

Instantly share code, notes, and snippets.

@marcoherzog

marcoherzog/material-design-breakpoints.css

Forked from eyecatchup/material-design-breakpoints.css
Created December 5, 2019 17:57
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save marcoherzog/be5663e57972ae435c7d4ce26904ce7f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save marcoherzog/be5663e57972ae435c7d4ce26904ce7f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @eyecatchup eyecatchup revised this gist Mar 11, 2016. No changes.
  2. @eyecatchup 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) { }