设备尺寸参考 ：Mobile devices
媒体查询类型浏览器支持情况：CSS3 Media Queries overview
jdc规范：媒体查询 _ Aotu.io - 前端代码规范

判断设备横竖屏

  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. }