zoukankan      html  css  js  c++  java

  • 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- 320px)   
    6.   and (max-device- 480px)  
    7.   and (-webkit-min-device-pixel-ratio: 2) {  
    8.   
    9. }  
    10.   
    11. /* Portrait */  
    12. @media only screen   
    13.   and (min-device- 320px)   
    14.   and (max-device- 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- 320px)   
    22.   and (max-device- 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- 320px)   
    33.   and (max-device- 568px)  
    34.   and (-webkit-min-device-pixel-ratio: 2) {  
    35.   
    36. }  
    37.   
    38. /* Portrait */  
    39. @media only screen   
    40.   and (min-device- 320px)   
    41.   and (max-device- 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- 320px)   
    49.   and (max-device- 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- 375px)   
    60.   and (max-device- 667px)   
    61.   and (-webkit-min-device-pixel-ratio: 2) {   
    62.   
    63. }  
    64.   
    65. /* Portrait */  
    66. @media only screen   
    67.   and (min-device- 375px)   
    68.   and (max-device- 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- 375px)   
    77.   and (max-device- 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- 414px)   
    88.   and (max-device- 736px)   
    89.   and (-webkit-min-device-pixel-ratio: 3) {   
    90.   
    91. }  
    92.   
    93. /* Portrait */  
    94. @media only screen   
    95.   and (min-device- 414px)   
    96.   and (max-device- 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- 414px)   
    105.   and (max-device- 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- 320px)   
    6.   and (device-height: 640px)   
    7.   and (-webkit-device-pixel-ratio: 2) {  
    8.   
    9. }  
    10.   
    11. /* Portrait */  
    12. @media screen   
    13.   and (device- 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- 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- 320px)   
    34.   and (device-height: 640px)   
    35.   and (-webkit-device-pixel-ratio: 3) {  
    36.   
    37. }  
    38.   
    39. /* Portrait */  
    40. @media screen   
    41.   and (device- 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- 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- 360px)   
    62.   and (device-height: 640px)   
    63.   and (-webkit-device-pixel-ratio: 3) {  
    64.   
    65. }  
    66.   
    67. /* Portrait */  
    68. @media screen   
    69.   and (device- 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- 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- 360px)   
    6.   and (device-height: 640px)   
    7.   and (-webkit-device-pixel-ratio: 3) {  
    8.   
    9. }  
    10.   
    11. /* Portrait */  
    12. @media screen   
    13.   and (device- 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- 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- 768px)   
    6.   and (max-device- 1024px)   
    7.   and (-webkit-min-device-pixel-ratio: 1) {  
    8.   
    9. }  
    10.   
    11. /* Portrait */  
    12. @media only screen   
    13.   and (min-device- 768px)   
    14.   and (max-device- 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- 768px)   
    23.   and (max-device- 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- 768px)   
    33.   and (max-device- 1024px)   
    34.   and (-webkit-min-device-pixel-ratio: 1) {  
    35.   
    36. }  
    37.   
    38. /* Portrait */  
    39. @media only screen   
    40.   and (min-device- 768px)   
    41.   and (max-device- 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- 768px)   
    50.   and (max-device- 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- 768px)   
    60.   and (max-device- 1024px)   
    61.   and (-webkit-min-device-pixel-ratio: 2) {  
    62.   
    63. }  
    64.   
    65. /* Portrait */  
    66. @media only screen   
    67.   and (min-device- 768px)   
    68.   and (max-device- 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- 768px)   
    77.   and (max-device- 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- 800px)   
    6.   and (max-device- 1280px) {  
    7.   
    8. }  
    9.   
    10. /* Portrait */  
    11. @media   
    12.   (max-device- 800px)   
    13.   and (orientation: portrait) {   
    14.   
    15. }  
    16.   
    17. /* Landscape */  
    18. @media   
    19.   (max-device- 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- 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- 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- 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- 800px)   
    6.   and (max-device- 1280px)   
    7.   and (-webkit-min-device-pixel-ratio: 1.5) {  
    8.   
    9. }  
    10.   
    11. /* Portrait */  
    12. @media only screen   
    13.   and (min-device- 800px)   
    14.   and (max-device- 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- 800px)   
    22.   and (max-device- 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- 1200px)   
    33.   and (max-device- 1600px)   
    34.   and (-webkit-min-device-pixel-ratio: 1.5) {  
    35.   
    36. }  
    37.   
    38. /* Portrait */  
    39. @media only screen   
    40.   and (min-device- 1200px)   
    41.   and (max-device- 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- 1200px)   
    49.   and (max-device- 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- 1200px)   
    4.   and (max-device- 1600px)   
    5.   and (-webkit-min-device-pixel-ratio: 1) {   
    6. }  
    7.   
    8. /* ----------- Retina Screens ----------- */  
    9. @media screen   
    10.   and (min-device- 1200px)   
    11.   and (max-device- 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- 42mm)  
    4.   and (min-device- 38mm) {   
    5.   
    6. }  

    b) Apple Watch

    Html代码  收藏代码
    1. /* ----------- Moto 360 Watch ----------- */  
    2. @media   
    3.   (max-device- 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
  • 相关阅读:
    Hystrix解析（三）
    Hystrix解析（二）
    在阿里云开发平台编写第一个 HelloWorld 程序
    Jenkins与Docker的自动化CI/CD实战
    网页计数器例子
    ServletContext 对象
    Session
    Cookie
    Request 对象作用域
    转发，重定向（包括请求中文乱码解决）
  • 原文地址：https://www.cnblogs.com/ifannie/p/6003231.html
Copyright © 2011-2022 走看看