码迷，mamicode.com
首页 > 移动开发 > 详细

CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）

时间：2016-10-27 12:29:58      阅读：291      评论：0      收藏：0      [点我收藏+]

标签：min   class   retina   tools   cape   sni   dia   alt   分享   

  1. /* ----------- iPhone 4 and 4S ----------- */  
  2.   
  3. /* Portrait and Landscape */  
  4. @media only screen   
  5.   and (min-device-width: 320px)   
  6.   and (max-device-width: 480px)  
  7.   and (-webkit-min-device-pixel-ratio: 2) {  
  8.   
  9. }  
  10.   
  11. /* Portrait */  
  12. @media only screen   
  13.   and (min-device-width: 320px)   
  14.   and (max-device-width: 480px)  
  15.   and (-webkit-min-device-pixel-ratio: 2)  
  16.   and (orientation: portrait) {  
  17. }  
  18.   
  19. /* Landscape */  
  20. @media only screen   
  21.   and (min-device-width: 320px)   
  22.   and (max-device-width: 480px)  
  23.   and (-webkit-min-device-pixel-ratio: 2)  
  24.   and (orientation: landscape) {  
  25.   
  26. }  
  27.   
  28. /* ----------- iPhone 5 and 5S ----------- */  
  29.   
  30. /* Portrait and Landscape */  
  31. @media only screen   
  32.   and (min-device-width: 320px)   
  33.   and (max-device-width: 568px)  
  34.   and (-webkit-min-device-pixel-ratio: 2) {  
  35.   
  36. }  
  37.   
  38. /* Portrait */  
  39. @media only screen   
  40.   and (min-device-width: 320px)   
  41.   and (max-device-width: 568px)  
  42.   and (-webkit-min-device-pixel-ratio: 2)  
  43.   and (orientation: portrait) {  
  44. }  
  45.   
  46. /* Landscape */  
  47. @media only screen   
  48.   and (min-device-width: 320px)   
  49.   and (max-device-width: 568px)  
  50.   and (-webkit-min-device-pixel-ratio: 2)  
  51.   and (orientation: landscape) {  
  52.   
  53. }  
  54.   
  55. /* ----------- iPhone 6 ----------- */  
  56.   
  57. /* Portrait and Landscape */  
  58. @media only screen   
  59.   and (min-device-width: 375px)   
  60.   and (max-device-width: 667px)   
  61.   and (-webkit-min-device-pixel-ratio: 2) {   
  62.   
  63. }  
  64.   
  65. /* Portrait */  
  66. @media only screen   
  67.   and (min-device-width: 375px)   
  68.   and (max-device-width: 667px)   
  69.   and (-webkit-min-device-pixel-ratio: 2)  
  70.   and (orientation: portrait) {   
  71.   
  72. }  
  73.   
  74. /* Landscape */  
  75. @media only screen   
  76.   and (min-device-width: 375px)   
  77.   and (max-device-width: 667px)   
  78.   and (-webkit-min-device-pixel-ratio: 2)  
  79.   and (orientation: landscape) {   
  80.   
  81. }  
  82.   
  83. /* ----------- iPhone 6+ ----------- */  
  84.   
  85. /* Portrait and Landscape */  
  86. @media only screen   
  87.   and (min-device-width: 414px)   
  88.   and (max-device-width: 736px)   
  89.   and (-webkit-min-device-pixel-ratio: 3) {   
  90.   
  91. }  
  92.   
  93. /* Portrait */  
  94. @media only screen   
  95.   and (min-device-width: 414px)   
  96.   and (max-device-width: 736px)   
  97.   and (-webkit-min-device-pixel-ratio: 3)  
  98.   and (orientation: portrait) {   
  99.   
  100. }  
  101.   
  102. /* Landscape */  
  103. @media only screen   
  104.   and (min-device-width: 414px)   
  105.   and (max-device-width: 736px)   
  106.   and (-webkit-min-device-pixel-ratio: 3)  
  107.   and (orientation: landscape) {   
  108.   
  109. }  

 

b) Galaxy Phones

Html代码  技术分享
  1. /* ----------- Galaxy S3 ----------- */  
  2.   
  3. /* Portrait and Landscape */  
  4. @media screen   
  5.   and (device-width: 320px)   
  6.   and (device-height: 640px)   
  7.   and (-webkit-device-pixel-ratio: 2) {  
  8.   
  9. }  
  10.   
  11. /* Portrait */  
  12. @media screen   
  13.   and (device-width: 320px)   
  14.   and (device-height: 640px)   
  15.   and (-webkit-device-pixel-ratio: 2)   
  16.   and (orientation: portrait) {  
  17.   
  18. }  
  19.   
  20. /* Landscape */  
  21. @media screen   
  22.   and (device-width: 320px)   
  23.   and (device-height: 640px)   
  24.   and (-webkit-device-pixel-ratio: 2)   
  25.   and (orientation: landscape) {  
  26.   
  27. }  
  28.   
  29. /* ----------- Galaxy S4 ----------- */  
  30.   
  31. /* Portrait and Landscape */  
  32. @media screen   
  33.   and (device-width: 320px)   
  34.   and (device-height: 640px)   
  35.   and (-webkit-device-pixel-ratio: 3) {  
  36.   
  37. }  
  38.   
  39. /* Portrait */  
  40. @media screen   
  41.   and (device-width: 320px)   
  42.   and (device-height: 640px)   
  43.   and (-webkit-device-pixel-ratio: 3)   
  44.   and (orientation: portrait) {  
  45.   
  46. }  
  47.   
  48. /* Landscape */  
  49. @media screen   
  50.   and (device-width: 320px)   
  51.   and (device-height: 640px)   
  52.   and (-webkit-device-pixel-ratio: 3)   
  53.   and (orientation: landscape) {  
  54.   
  55. }  
  56.   
  57. /* ----------- Galaxy S5 ----------- */  
  58.   
  59. /* Portrait and Landscape */  
  60. @media screen   
  61.   and (device-width: 360px)   
  62.   and (device-height: 640px)   
  63.   and (-webkit-device-pixel-ratio: 3) {  
  64.   
  65. }  
  66.   
  67. /* Portrait */  
  68. @media screen   
  69.   and (device-width: 360px)   
  70.   and (device-height: 640px)   
  71.   and (-webkit-device-pixel-ratio: 3)   
  72.   and (orientation: portrait) {  
  73.   
  74. }  
  75.   
  76. /* Landscape */  
  77. @media screen   
  78.   and (device-width: 360px)   
  79.   and (device-height: 640px)   
  80.   and (-webkit-device-pixel-ratio: 3)   
  81.   and (orientation: landscape) {  
  82.   
  83. }  

 

c) HTC Phones

Html代码  技术分享
  1. /* ----------- HTC One ----------- */  
  2.   
  3. /* Portrait and Landscape */  
  4. @media screen   
  5.   and (device-width: 360px)   
  6.   and (device-height: 640px)   
  7.   and (-webkit-device-pixel-ratio: 3) {  
  8.   
  9. }  
  10.   
  11. /* Portrait */  
  12. @media screen   
  13.   and (device-width: 360px)   
  14.   and (device-height: 640px)   
  15.   and (-webkit-device-pixel-ratio: 3)   
  16.   and (orientation: portrait) {  
  17.   
  18. }  
  19.   
  20. /* Landscape */  
  21. @media screen   
  22.   and (device-width: 360px)   
  23.   and (device-height: 640px)   
  24.   and (-webkit-device-pixel-ratio: 3)   
  25.   and (orientation: landscape) {  
  26.   
  27. }  

 

2. Tablets

a) iPads

Html代码  技术分享
  1. /* ----------- iPad mini ----------- */  
  2.   
  3. /* Portrait and Landscape */  
  4. @media only screen   
  5.   and (min-device-width: 768px)   
  6.   and (max-device-width: 1024px)   
  7.   and (-webkit-min-device-pixel-ratio: 1) {  
  8.   
  9. }  
  10.   
  11. /* Portrait */  
  12. @media only screen   
  13.   and (min-device-width: 768px)   
  14.   and (max-device-width: 1024px)   
  15.   and (orientation: portrait)   
  16.   and (-webkit-min-device-pixel-ratio: 1) {  
  17.   
  18. }  
  19.   
  20. /* Landscape */  
  21. @media only screen   
  22.   and (min-device-width: 768px)   
  23.   and (max-device-width: 1024px)   
  24.   and (orientation: landscape)   
  25.   and (-webkit-min-device-pixel-ratio: 1) {  
  26.   
  27. }  
  28.   
  29. /* ----------- iPad 1 and 2 ----------- */  
  30. /* Portrait and Landscape */  
  31. @media only screen   
  32.   and (min-device-width: 768px)   
  33.   and (max-device-width: 1024px)   
  34.   and (-webkit-min-device-pixel-ratio: 1) {  
  35.   
  36. }  
  37.   
  38. /* Portrait */  
  39. @media only screen   
  40.   and (min-device-width: 768px)   
  41.   and (max-device-width: 1024px)   
  42.   and (orientation: portrait)   
  43.   and (-webkit-min-device-pixel-ratio: 1) {  
  44.   
  45. }  
  46.   
  47. /* Landscape */  
  48. @media only screen   
  49.   and (min-device-width: 768px)   
  50.   and (max-device-width: 1024px)   
  51.   and (orientation: landscape)   
  52.   and (-webkit-min-device-pixel-ratio: 1) {  
  53.   
  54. }  
  55.   
  56. /* ----------- iPad 3 and 4 ----------- */  
  57. /* Portrait and Landscape */  
  58. @media only screen   
  59.   and (min-device-width: 768px)   
  60.   and (max-device-width: 1024px)   
  61.   and (-webkit-min-device-pixel-ratio: 2) {  
  62.   
  63. }  
  64.   
  65. /* Portrait */  
  66. @media only screen   
  67.   and (min-device-width: 768px)   
  68.   and (max-device-width: 1024px)   
  69.   and (orientation: portrait)   
  70.   and (-webkit-min-device-pixel-ratio: 2) {  
  71.   
  72. }  
  73.   
  74. /* Landscape */  
  75. @media only screen   
  76.   and (min-device-width: 768px)   
  77.   and (max-device-width: 1024px)   
  78.   and (orientation: landscape)   
  79.   and (-webkit-min-device-pixel-ratio: 2) {  
  80.   
  81. }  

 

b) Galaxy Tablets

Html代码  技术分享
  1. /* ----------- Galaxy Tab 10.1 ----------- */  
  2.   
  3. /* Portrait and Landscape */  
  4. @media   
  5.   (min-device-width: 800px)   
  6.   and (max-device-width: 1280px) {  
  7.   
  8. }  
  9.   
  10. /* Portrait */  
  11. @media   
  12.   (max-device-width: 800px)   
  13.   and (orientation: portrait) {   
  14.   
  15. }  
  16.   
  17. /* Landscape */  
  18. @media   
  19.   (max-device-width: 1280px)   
  20.   and (orientation: landscape) {   
  21.   
  22. }  

 

c) Nexus Tablets

Html代码  技术分享
  1. /* ----------- Asus Nexus 7 ----------- */  
  2.   
  3. /* Portrait and Landscape */  
  4. @media screen   
  5.   and (device-width: 601px)   
  6.   and (device-height: 906px)   
  7.   and (-webkit-min-device-pixel-ratio: 1.331)   
  8.   and (-webkit-max-device-pixel-ratio: 1.332) {  
  9.   
  10. }  
  11.   
  12. /* Portrait */  
  13. @media screen   
  14.   and (device-width: 601px)   
  15.   and (device-height: 906px)   
  16.   and (-webkit-min-device-pixel-ratio: 1.331)   
  17.   and (-webkit-max-device-pixel-ratio: 1.332)   
  18.   and (orientation: portrait) {  
  19.   
  20. }  
  21.   
  22. /* Landscape */  
  23. @media screen   
  24.   and (device-width: 601px)   
  25.   and (device-height: 906px)   
  26.   and (-webkit-min-device-pixel-ratio: 1.331)   
  27.   and (-webkit-max-device-pixel-ratio: 1.332)   
  28.   and (orientation: landscape) {  
  29.   
  30. }  

 

d) Kindle Fire

Html代码  技术分享
  1. /* ----------- Kindle Fire HD 7" ----------- */  
  2.   
  3. /* Portrait and Landscape */  
  4. @media only screen   
  5.   and (min-device-width: 800px)   
  6.   and (max-device-width: 1280px)   
  7.   and (-webkit-min-device-pixel-ratio: 1.5) {  
  8.   
  9. }  
  10.   
  11. /* Portrait */  
  12. @media only screen   
  13.   and (min-device-width: 800px)   
  14.   and (max-device-width: 1280px)   
  15.   and (-webkit-min-device-pixel-ratio: 1.5)   
  16.   and (orientation: portrait) {  
  17. }  
  18.   
  19. /* Landscape */  
  20. @media only screen   
  21.   and (min-device-width: 800px)   
  22.   and (max-device-width: 1280px)   
  23.   and (-webkit-min-device-pixel-ratio: 1.5)   
  24.   and (orientation: landscape) {  
  25.   
  26. }  
  27.   
  28. /* ----------- Kindle Fire HD 8.9" ----------- */  
  29.   
  30. /* Portrait and Landscape */  
  31. @media only screen   
  32.   and (min-device-width: 1200px)   
  33.   and (max-device-width: 1600px)   
  34.   and (-webkit-min-device-pixel-ratio: 1.5) {  
  35.   
  36. }  
  37.   
  38. /* Portrait */  
  39. @media only screen   
  40.   and (min-device-width: 1200px)   
  41.   and (max-device-width: 1600px)   
  42.   and (-webkit-min-device-pixel-ratio: 1.5)   
  43.   and (orientation: portrait) {  
  44. }  
  45.   
  46. /* Landscape */  
  47. @media only screen   
  48.   and (min-device-width: 1200px)   
  49.   and (max-device-width: 1600px)   
  50.   and (-webkit-min-device-pixel-ratio: 1.5)   
  51.   and (orientation: landscape) {  
  52.   
  53. }  

 

3. Laptops

Html代码  技术分享
  1. /* ----------- Non-Retina Screens ----------- */  
  2. @media screen   
  3.   and (min-device-width: 1200px)   
  4.   and (max-device-width: 1600px)   
  5.   and (-webkit-min-device-pixel-ratio: 1) {   
  6. }  
  7.   
  8. /* ----------- Retina Screens ----------- */  
  9. @media screen   
  10.   and (min-device-width: 1200px)   
  11.   and (max-device-width: 1600px)   
  12.   and (-webkit-min-device-pixel-ratio: 2)  
  13.   and (min-resolution: 192dpi) {   
  14. }  

 

4. Wearables

a) Apple Watch

Html代码  技术分享
  1. /* ----------- Apple Watch ----------- */  
  2. @media  
  3.   (max-device-width: 42mm)  
  4.   and (min-device-width: 38mm) {   
  5.   
  6. }  

 

b) Apple Watch

Html代码  技术分享
  1. /* ----------- Moto 360 Watch ----------- */  
  2. @media   
  3.   (max-device-width: 218px)  
  4.   and (max-device-height: 281px) {   
  5.   
  6. }  

参考：

  1. https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
  2. CSS3: 移动端开发中 max-device-width 与 max-width 的区别

 

本文转自：CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices

CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）

标签：min   class   retina   tools   cape   sni   dia   alt   分享   

原文地址：http://www.cnblogs.com/ifannie/p/6003231.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！