媒体查询

【译】Responsive Design常用的媒体查询

 Web前端  dwqs  2015-04-27 10:58  3,100 人阅读  0评论

（PS:原文写于2012年，本文参照原文作了适当修改，不当之处请指出）

现在Web朝着响应式的趋势发展，媒体查询在创建响应式网站中起到了主要作用。

没有媒体查询几乎不能实现响应式设计，利用媒体查询，我们可以针对特定的设备，如显示器、智能手机和平板，写CSS。

媒体查询是响应式设计的核心

在这篇文章中我将分享一些到目前为止我收集到的常用媒体查询。在一些示例中，我可能是错误的，但是不用担心，因为我针对这个开通了评论功能。我把它们分为显示器媒体查询、智能手机媒体查询和平板媒体查询

显示器媒体查询

---

显示器媒体查询是以屏幕大小为基础划分的

640px

1. @media screen and (max-width: 640px)
2. {
3. }

800px

1. @media screen and (max-width: 800px)
2. {
3. }

1024px

1. @media screen and (max-width: 1024px)
2. {
3. }

智能手机媒体查询

---

适用于大部分主流智能手机

iPhone(2G-4S)

1. /*Landscape Mode*/
2. @media screen and (max-device-width: 480px)
3. {
4. }
5. /* Portrait Mode */
6. @media screen and (max-device-width: 320px)
7. {
8. }

iPhone 4

1. @media only screen and (-webkit-min-device-pixel-ratio : 1.5),
2. only screen and (min-device-pixel-ratio : 1.5)
3. {
4. }

iPhone5

1. @media only screen
2. and (min-device-width : 320px)
3. and (max-device-width : 568px) {
4.  /* 样式写在这里 */
5. }

iPhone6

1. @media only screen and (min-device-width: 375px) and (max-device-width: 667px)
2. and (orientation : portrait) {
3.  /*iPhone 6 Portrait*/
4. }
5. @media only screen and (min-device-width: 375px) and (max-device-width: 667px)
6.  and (orientation : landscape) {
7.  /*iPhone 6 landscape*/
8. }
9. @media only screen and (min-device-width: 414px) and (max-device-width: 736px)
10. and (orientation : portrait) {
11.  /*iPhone 6+ Portrait*/
12. }
13. @media only screen and (min-device-width: 414px) and (max-device-width: 736px)
14. and (orientation : landscape) {
15.  /*iPhone 6+ landscape*/
16. }
17. @media only screen and (max-device-width: 640px),
18.  only screen and (max-device-width: 667px),
19. only screen and (max-width: 480px){
20.  /*iPhone 6 and iPhone 6+ portrait and landscape*/
21. }
22. @media only screen and (max-device-width: 640px),
23. only screen and (max-device-width: 667px),
24. only screen and (max-width: 480px) and (orientation : portrait){
25.  /*iPhone 6 and iPhone 6+ portrait*/
26. }
27. @media only screen and (max-device-width: 640px),
28. only screen and (max-device-width: 667px),
29. only screen and (max-width: 480px) and (orientation : landscape){
30.  /*iPhone 6 and iPhone 6+ landscape*/
31. }

HTC Evo，BlackBerry Torch，HTC Thunderbolt，HD2

1. @media screen and (max-device-width: 480px)
2. {
3. }

平板媒体查询

---

这个列表会有点长

iPad

1. /* Landscape Mode */
2. @media (max-device-width: 1024px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 768px) and (orientation: portrait)
7. {
8. }

iPad 2

1. /* Landscape Mode */
2. @media (max-device-width: 1024px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 768px) and (orientation: portrait)
7. {
8. }

iPad 3

1. /* Landscape Mode */
2. @media (max-device-width: 1024px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 768px) and (orientation: portrait)
7. {
8. }

iPad mini

1. @media only screen
2. and (min-device-width : 768px)
3. and (max-device-width : 1024px)
4. and (-webkit-min-device-pixel-ratio: 1) {
5.  /* 样式写在这里 */
6. }

Samsung Galaxy Tab 10.1

1. /* Landscape Mode */
2. @media (max-device-width: 1280px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 800px) and (orientation: portrait)
7. {
8. }

Motorola Xoom

1. /* Landscape Mode */
2. @media (max-device-width: 1280px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 800px) and (orientation: portrait)
7. {
8. }

HTC Flyer

1. /* Landscape Mode */
2. @media (max-device-width: 1024px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 600px) and (orientation: portrait)
7. {
8. }

BlackBerry PlayBook

1. /* Landscape Mode */
2. @media (max-device-width: 1024px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 600px) and (orientation: portrait)
7. {
8. }

HP TouchPad

1. /* Landscape Mode */
2. @media (max-device-width: 1024px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 768px) and (orientation: portrait)
7. {
8. }

Lenovo Thinkpad Tablet

1. /* Landscape Mode */
2. @media (max-device-width: 1280px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 800px) and (orientation: portrait)
7. {
8. }

Sony Tablet S

1. /* Landscape Mode */
2. @media (max-device-width: 1280px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 800px) and (orientation: portrait)
7. {
8. }

T-Mobile G-Slate

1. /* Landscape Mode */
2. @media (max-device-width: 1280px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 768px) and (orientation: portrait)
7. {
8. }

ViewSonic ViewPad 10

1. /* Landscape Mode */
2. @media (max-device-width: 1024px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 600px) and (orientation: portrait)
7. {
8. }

Dell Streak 7

1. /* Landscape Mode */
2. @media (max-device-width: 800px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 480px) and (orientation: portrait)
7. {
8. }

ASUS Eee Pad Transformer

1. /* Landscape Mode */
2. @media (max-device-width: 1080px) and (orientation: landscape)
3. {
4. }
5. /* Portrait Mode */
6. @media (max-device-width: 800px) and (orientation: portrait)
7. {
8. }