2. @media all and (min-width:320px) and (max-width:640px) {
  4. }

常用设备设置

  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.   and (min-device-width: 320px) 
  40.   and (max-device-width: 568px)
  41.   and (-webkit-min-device-pixel-ratio: 2)
  43. }
  45. /* Landscape */
  46. @media only screen 
  47.   and (min-device-width: 320px) 
  48.   and (max-device-width: 568px)
  49.   and (-webkit-min-device-pixel-ratio: 2)
  50.   and (orientation: landscape) {
  52. }
  54. /* ----------- iPhone 6 ----------- */
  56. /* Portrait and Landscape */
  57. @media only screen 
  58.   and (min-device-width: 375px) 
  59.   and (max-device-width: 667px) 
  60.   and (-webkit-min-device-pixel-ratio: 2) { 
  62. }
  64. /* Portrait */
  65. @media only screen 
  66.   and (min-device-width: 375px) 
  67.   and (max-device-width: 667px) 
  68.   and (-webkit-min-device-pixel-ratio: 2)
  69.   and (orientation: portrait) { 
  71. }
  73. /* Landscape */
  74. @media only screen 
  75.   and (min-device-width: 375px) 
  76.   and (max-device-width: 667px) 
  77.   and (-webkit-min-device-pixel-ratio: 2)
  78.   and (orientation: landscape) { 
  80. }
  82. /* ----------- iPhone 6+ ----------- */
  84. /* Portrait and Landscape */
  85. @media only screen 
  86.   and (max-device-width: 736px) 
  89. }
  91. /* Portrait */
  92. @media only screen 
  93.   and (min-device-width: 414px) 
  94.   and (max-device-width: 736px) 
  95.   and (-webkit-min-device-pixel-ratio: 3)
  96.   and (orientation: portrait) { 
  98. }
  100. /* Landscape */
  101. @media only screen 
  102.   and (min-device-width: 414px) 
  103.   and (max-device-width: 736px) 
  104.   and (-webkit-min-device-pixel-ratio: 3)
  105.   and (orientation: landscape) { 
  107. }
  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) {
  26. }