您的位置: 首页  >  IT文章  >  CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）

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

分类: IT文章 • 2022-03-02 10:57:39

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

  • /* ----------- iPhone 4 and 4S ----------- */  
  •   
  • /* Portrait and Landscape */  
  • @media only screen   
  •   and (min-device- 320px)   
  •   and (max-device- 480px)  
  •   and (-webkit-min-device-pixel-ratio: 2) {  
  •   
  • }  
  •   
  • /* Portrait */  
  • @media only screen   
  •   and (min-device- 320px)   
  •   and (max-device- 480px)  
  •   and (-webkit-min-device-pixel-ratio: 2)  
  •   and (orientation: portrait) {  
  • }  
  •   
  • /* Landscape */  
  • @media only screen   
  •   and (min-device- 320px)   
  •   and (max-device- 480px)  
  •   and (-webkit-min-device-pixel-ratio: 2)  
  •   and (orientation: landscape) {  
  •   
  • }  
  •   
  • /* ----------- iPhone 5 and 5S ----------- */  
  •   
  • /* Portrait and Landscape */  
  • @media only screen   
  •   and (min-device- 320px)   
  •   and (max-device- 568px)  
  •   and (-webkit-min-device-pixel-ratio: 2) {  
  •   
  • }  
  •   
  • /* Portrait */  
  • @media only screen   
  •   and (min-device- 320px)   
  •   and (max-device- 568px)  
  •   and (-webkit-min-device-pixel-ratio: 2)  
  •   and (orientation: portrait) {  
  • }  
  •   
  • /* Landscape */  
  • @media only screen   
  •   and (min-device- 320px)   
  •   and (max-device- 568px)  
  •   and (-webkit-min-device-pixel-ratio: 2)  
  •   and (orientation: landscape) {  
  •   
  • }  
  •   
  • /* ----------- iPhone 6 ----------- */  
  •   
  • /* Portrait and Landscape */  
  • @media only screen   
  •   and (min-device- 375px)   
  •   and (max-device- 667px)   
  •   and (-webkit-min-device-pixel-ratio: 2) {   
  •   
  • }  
  •   
  • /* Portrait */  
  • @media only screen   
  •   and (min-device- 375px)   
  •   and (max-device- 667px)   
  •   and (-webkit-min-device-pixel-ratio: 2)  
  •   and (orientation: portrait) {   
  •   
  • }  
  •   
  • /* Landscape */  
  • @media only screen   
  •   and (min-device- 375px)   
  •   and (max-device- 667px)   
  •   and (-webkit-min-device-pixel-ratio: 2)  
  •   and (orientation: landscape) {   
  •   
  • }  
  •   
  • /* ----------- iPhone 6+ ----------- */  
  •   
  • /* Portrait and Landscape */  
  • @media only screen   
  •   and (min-device- 414px)   
  •   and (max-device- 736px)   
  •   and (-webkit-min-device-pixel-ratio: 3) {   
  •   
  • }  
  •   
  • /* Portrait */  
  • @media only screen   
  •   and (min-device- 414px)   
  •   and (max-device- 736px)   
  •   and (-webkit-min-device-pixel-ratio: 3)  
  •   and (orientation: portrait) {   
  •   
  • }  
  •   
  • /* Landscape */  
  • @media only screen   
  •   and (min-device- 414px)   
  •   and (max-device- 736px)   
  •   and (-webkit-min-device-pixel-ratio: 3)  
  •   and (orientation: landscape) {   
  •   
  • }  

    • b) Galaxy Phones

    Html代码  CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）
    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代码  CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）
    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代码  CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）
    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代码  CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）
    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代码  CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）
    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代码  CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）
    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代码  CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）
    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代码  CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）
    1. /* ----------- Apple Watch ----------- */  
    2. @media  
    3.   (max-device- 42mm)  
    4.   and (min-device- 38mm) {   
    5.   
    6. }  

    b) Apple Watch

    Html代码  CSS3 媒体查询移动设备尺寸 Media Queries for Standard Devices （包括 苹果手表 apple watch）
    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

    相关推荐