GreenPolyProducts/polymer-starter-kit
5
0
Fork 0
mirror of https://github.com/Polymer/polymer-starter-kit.git synced 2025-02-25 18:55:22 -06:00
Code Issues Packages Projects Releases Wiki Activity

Add Material Design adaptive breakpoints

Browse Source 
As reviewed by Emmanuel.
This commit is contained in:
Addy Osmani
2015-05-28 23:09:31 -07:00
parent 4082358301
commit a8e5560c52
1 changed files with 41 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
app/elements/app-theme.html
View File

@@ -172,4 +172,45 @@ paper-menu a {
}
/* 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: 0px) 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: 0px) 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: 0px) and (max-width: 480px) and (min-aspect-ratio: 4/3) { }
/* desktop-x-small */
@media all and (min-width: 0px) and (max-width: 480px) and (max-aspect-ratio: 4/3) { }
/* desktop-small-landscape */
@media all and (min-width: 481px) and (max-width: 840px) and (min-aspect-ratio: 4/3) { }
/* 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 (min-aspect-ratio: 4/3) { }
/* 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 (min-width: 1920px) { }
</style>