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

Posted FannieGirl

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）相关的知识，希望对你有一定的参考价值。

  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）的主要内容，如果未能解决你的问题，请参考以下文章

关于css3媒体查询Media的一些用法小结

CSS3响应式布局（媒体查询@media）

CSS3响应式布局（媒体查询@media）

css3 -- 媒体查询

0080 媒体查询media引入资源

css3 media媒体查询器用法总结 兼容ie8以下的方法