设备尺寸参考 ：Mobile devices

媒体查询类型浏览器支持情况：CSS3 Media Queries overview

常用查询语句

判断设备横竖屏

  1. /* 横屏 */
  2. @media all and (orientation :landscape) {
  4. } 
  6. /* 竖屏 */
  7. @media all and (orientation :portrait) {
  9. }

判断设备宽高

  1. /* 设备宽度大于 320px 小于 640px */
  2. @media all and (min-width:320px) and (max-width:640px) {
  4. }

判断设备像素比

  1. /* 设备像素比为 1 */
  2. @media only screen and (-webkit-min-device-pixel-ratio: 1), only screen and (min-device-pixel-ratio: 1) {
  4. }
  6. /* 设备像素比为 1.5 */
  7. @media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  9. }
  11. /* 设备像素比为 2 */
  12. @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
  14. }

常用设备设置

iPhones

  1. /* ----------- iPhone 4 and 4S ----------- */
  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) {
  9. }
  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. }
  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) {
  26. }
  28. /* ----------- iPhone 5 and 5S ----------- */
  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) {
  36. }
  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. }
  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) {
  53. }
  55. /* ----------- iPhone 6 ----------- */
  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) { 
  63. }
  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) { 
  72. }
  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) { 
  81. }
  83. /* ----------- iPhone 6+ ----------- */
  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) { 
  91. }
  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) { 
  100. }
  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) { 
  109. }

Galaxy Phones

  1. /* ----------- Galaxy S3 ----------- */
  3. /* Portrait and Landscape */
  4. @media screen 
  5.   and (device-width: 320px) 
  6.   and (device-height: 640px) 
  7.   and (-webkit-device-pixel-ratio: 2) {
  9. }
  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) {
  18. }
  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) {
  27. }
  29. /* ----------- Galaxy S4 ----------- */
  31. /* Portrait and Landscape */
  32. @media screen 
  33.   and (device-width: 320px) 
  34.   and (device-height: 640px) 
  35.   and (-webkit-device-pixel-ratio: 3) {
  37. }
  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) {
  46. }
  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) {
  55. }
  57. /* ----------- Galaxy S5 ----------- */
  59. /* Portrait and Landscape */
  60. @media screen 
  61.   and (device-width: 360px) 
  62.   and (device-height: 640px) 
  63.   and (-webkit-device-pixel-ratio: 3) {
  65. }
  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) {
  74. }
  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) {
  83. }

HTC Phones

  1. /* ----------- HTC One ----------- */
  3. /* Portrait and Landscape */
  4. @media screen 
  5.   and (device-width: 360px) 
  6.   and (device-height: 640px) 
  7.   and (-webkit-device-pixel-ratio: 3) {
  9. }
  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) {
  18. }
  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) {
  27. }

iPads

  1. /* ----------- iPad mini ----------- */
  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) {
  9. }
  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) {
  18. }
  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) {
  27. }
  29. /* ----------- iPad 1 and 2 ----------- */
  31. /* Portrait and Landscape */
  32. @media only screen 
  33.   and (min-device-width: 768px) 
  34.   and (max-device-width: 1024px) 
  35.   and (-webkit-min-device-pixel-ratio: 1) {
  37. }
  39. /* Portrait */
  40. @media only screen 
  41.   and (min-device-width: 768px) 
  42.   and (max-device-width: 1024px) 
  43.   and (orientation: portrait) 
  44.   and (-webkit-min-device-pixel-ratio: 1) {
  46. }
  48. /* Landscape */
  49. @media only screen 
  50.   and (min-device-width: 768px) 
  51.   and (max-device-width: 1024px) 
  52.   and (orientation: landscape) 
  53.   and (-webkit-min-device-pixel-ratio: 1) {
  55. }
  57. /* ----------- iPad 3 and 4 ----------- */
  59. /* Portrait and Landscape */
  60. @media only screen 
  61.   and (min-device-width: 768px) 
  62.   and (max-device-width: 1024px) 
  63.   and (-webkit-min-device-pixel-ratio: 2) {
  65. }
  67. /* Portrait */
  68. @media only screen 
  69.   and (min-device-width: 768px) 
  70.   and (max-device-width: 1024px) 
  71.   and (orientation: portrait) 
  72.   and (-webkit-min-device-pixel-ratio: 2) {
  74. }
  76. /* Landscape */
  77. @media only screen 
  78.   and (min-device-width: 768px) 
  79.   and (max-device-width: 1024px) 
  80.   and (orientation: landscape) 
  81.   and (-webkit-min-device-pixel-ratio: 2) {
  83. }