CSS3 Media Queries片段
在这里主要分成三类：移动端、PC端以及一些常见的响应式框架的Media Queries片段。
移动端Media Queries片段
iPhone5
@media screen and (device-aspect-ratio: 40/71) {} 或者： @media screen and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2){}
iPhone 5 In Portrait & Landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 568px){ // CSS Style }
iPhone 5 In Landscape
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : landscape){ // CSS Style }
iPhone 5 In Portrait
@media only screen and (min-device-width : 320px) and (max-device-width : 568px) and (orientation : portrait){ // CSS Style }
iPone4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {}
iPhone 3G
@media screen and (device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1){}
iPhone
@media screen and (max-device-width: 480px) {} @media screen and (max-device-width: 320px) {}
Blackberry Torch
@media screen and (max-device-width: 480px) {}
Samsung S3
@media only screen and (-webkit-device-pixel-ratio: 2) {}
Google Nexus 7
@media screen and (device-width: 600px) and (device-height: 905px) and (-webkit-min-device-pixel-ratio: 1.331) and (-webkit-max-device-pixel-ratio: 1.332) {}
Samsung Galaxy S3
@media only screen and (-webkit-device-pixel-ratio: 2) {}
Samsung Galaxy S2
@media screen and (device-width: 320px) and (device-height: 533px) and (-webkit-device-pixel-ratio: 1.5) {}
Galaxy Tab 10.1
@media (max-device-width: 1280px) and (orientation: landscape) {} @media (max-device-width: 800px) and (orientation: portrait) {}
iPad In Portrait & Landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px){ // CSS Styles }
iPad In Landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape){ // CSS Styles }
iPad In Portrait
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait){ // CSS Styles }
Retina iPad In Portrait & Landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2){ // CSS Styles }
Retina iPad in landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2){ // CSS Styles }
Retina iPad in portrait
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 2){ // CSS Styles }
iPad Mini In Portrait & Landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 1){ // CSS Style }
iPad Mini In Landscape
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 1){ // CSS Style }
iPad Mini In Portrait
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1) { // CSS Style }
桌面端
320px
@media screen and (max-width: 320px) {}
640px
@media screen and (max-width: 640px) {}
800px
@media screen and (max-width: 800px) {}
1024px
@media screen and (max-width: 1024px) {}
1028px
@media screen and (max-width: 1028px) {}
除了上面的常见Media Queries片段之外，下面的网站还提供了一些其他的片段：
框架Media Queries片段
Boilerplate
@media only screen and (min-width : 320px) and (max-width : 480px) { } @media only screen and (min-width : 321px) { } @media only screen and (max-width : 320px) { } @media only screen and (min-width : 768px) and (max-width : 1024px) { } @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : landscape) { } @media only screen and (min-width : 768px) and (max-width : 1024px) and (orientation : portrait) { } @media only screen and (min-width : 1224px) { } @media only screen and (min-width : 1824px) { } @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { }
Bootstrap的Media Queries
@media (min-width: 1200px) { ... } @media (min-width: 768px) and (max-width: 979px) { ... } @media (max-width: 767px) { ... } @media (max-width: 480px) { ... }
Foundation的Media Queries
@media only screen { } @media only screen and (min-width: 768px) {} @media only screen and (min-width: 1280px) {} @media only screen and (min-width: 1440px) {} @media only screen and (orientation: landscape) {} @media only screen and (orientation: portrait) {}
Skeleton的Media Queries
@media only screen and (max-width: 959px) {} @media only screen and (min-width: 768px) and (max-width: 959px) {} @media only screen and (max-width: 767px) {} @media only screen and (min-width: 480px) and (max-width: 767px) {} @media only screen and (max-width: 479px) {}
FRAMELESS的Media Queries
@media screen and (max-width: 16.875em){} @media screen and (min-width: 32.5em) and (max-width: 37.4375em), screen and (min-width: 45em) and (max-width: 56.9375em), screen and (min-width: 77.5em) and (max-width: 102.4375em), screen and (min-width: 135em){} @media screen and (min-width: 102.5em) and (max-width: 117.9375em), screen and (min-width: 150em){} @media screen and (min-width: 15em){} @media screen and (min-width: 30em){} @media screen and (min-width: 37.5em){} @media screen and (min-width: 57em){} @media screen and (min-width: 57em) and (max-width: 117.9375em){} @media screen and (min-width: 118em){}
Susy的Media Queries
@media (min-width: 29em) {} @media (min-width: 30em) and (max-width: 60em) {} @media (min-width: 119em) {} @media (min-width: 33.75em) and (max-width: 67.5em) {} @media (min-width: 33.75em) and (max-width: 67.5em) {}
Less Framework 4
@media only screen and (min-width: 768px) and (max-width: 991px) {} @media only screen and (max-width: 767px) {} @media only screen and (min-width: 480px) and (max-width: 767px) {}
Golden Grid System的Media Queries
@media screen and (min-width: 40em) {} @media screen and (min-width: 45em) {} @media screen and (min-width: 55.5em) {} @media screen and (min-width: 61.5em) {} @media screen and (min-width: 75em) {} @media screen and (min-width: 87em) {} @media screen and (min-width: 105em) {} @media screen and (min-width: 117em) {} @media screen and (min-width: 130em) {}
Fluid baseline的Media Queries
@media only screen and (min-width: 320px) {} @media only screen and (min-width: 480px) {} @media only screen and (min-width: 600px) {} @media only screen and (min-width: 768px) {} @media only screen and (min-width: 1024px) {} @media only screen and (min-width: 1280px) {} @media only screen and (min-width: 1400px) {}
320andUP
@media only screen and (min-width: 480px) { } @media only screen and (min-width: 600px) { } @media only screen and (min-width: 768px) { } @media only screen and (min-width: 992px) { } @media only screen and (min-width: 1382px) { } @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { }
Gridless
@media only screen and (min-width: 480px) { } @media only screen and (min-width: 768px) { } @media only screen and (min-width: 1024px) { }
TotanTHEMES
@media only screen and (max-width: 959px) {} @media only screen and (min-width: 768px) and (max-width: 989px) {} @media only screen and (max-width: 767px) {} @media only screen and (min-width: 480px) and (max-width: 767px) {} @media only screen and (max-width: 479px) {}
Responsive Grid System
@media (max-width: 480px) {} @media (min-width: 480px) and (max-width: 768px) {} @media (min-width: 768px) {} @media (min-width: 1024px) {} @media (min-width: 1200px) {}
本文搜集的是Media Queries在各种设备下的代码片段，希望这些片段能帮大家更好的理解Responsive断点的设置。如果大家有更好的方案，希望能在评论中分享。