css3 – 什么是媒体查询的最佳宽度范围

前端之家收集整理的这篇文章主要介绍了css3 – 什么是媒体查询的最佳宽度范围前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有人可以让我知道响应式设计中检测媒体查询的最佳宽度范围是多少?

我想在4个媒体查询中覆盖所有台式机/笔记本电脑显示器(有一个方向),但我不知道是否可能,例如:小型显示器,中型显示器,大型和超大型显示器.

例如在这段代码

  1. /* Desktops and laptops ----------- */
  2. @media only screen and (min-width : 1224px) {}
  3.  
  4. /* Large screens ----------- */
  5. @media only screen and (min-width : 1824px) {}

我想我们仍然需要将台式机和笔记本电脑的媒体设置为三个子媒体(如13“至14”笔记本电脑),中等(如15至17)和大(超过22#),我知道浏览器分辨率不同比屏幕分辨率,但是我们说我们在所有格式的全屏模式下都有浏览器.

谢谢你的帮助

解决方法

尝试这个与视网膜显示
  1. /* Smartphones (portrait and landscape) ----------- */
  2. @media only screen
  3. and (min-device-width : 320px)
  4. and (max-device-width : 480px) {
  5. /* Styles */
  6. }
  7.  
  8. /* Smartphones (landscape) ----------- */
  9. @media only screen
  10. and (min-width : 321px) {
  11. /* Styles */
  12. }
  13.  
  14. /* Smartphones (portrait) ----------- */
  15. @media only screen
  16. and (max-width : 320px) {
  17. /* Styles */
  18. }
  19.  
  20. /* iPads (portrait and landscape) ----------- */
  21. @media only screen
  22. and (min-device-width : 768px)
  23. and (max-device-width : 1024px) {
  24. /* Styles */
  25. }
  26.  
  27. /* iPads (landscape) ----------- */
  28. @media only screen
  29. and (min-device-width : 768px)
  30. and (max-device-width : 1024px)
  31. and (orientation : landscape) {
  32. /* Styles */
  33. }
  34.  
  35. /* iPads (portrait) ----------- */
  36. @media only screen
  37. and (min-device-width : 768px)
  38. and (max-device-width : 1024px)
  39. and (orientation : portrait) {
  40. /* Styles */
  41. }
  42.  
  43. /* Desktops and laptops ----------- */
  44. @media only screen
  45. and (min-width : 1224px) {
  46. /* Styles */
  47. }
  48.  
  49. /* Large screens ----------- */
  50. @media only screen
  51. and (min-width : 1824px) {
  52. /* Styles */
  53. }
  54.  
  55. /* iPhone 4 ----------- */
  56. @media
  57. only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5) {
  58. /* Styles */
  59. }

更新

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

猜你在找的CSS相关文章