media query 开发总结

@media screen and (min-width:1080px){
html,body{ font-size:36px;}
}
@media screen and (min-width:720px) and (max-width:1079px){
html,body{ font-size:28px;}
}
@media screen and (min-width:640px) and (max-width:719px){
html,body{ font-size:24px;}
}
@media screen and (min-width:540px) and (max-width:639px){
html,body{ font-size:20px;}
}
@media screen and (min-width:480px) and (max-width:539px){
html,body{ font-size:18px;}
}
@media screen and (min-width:320px) and (max-width:479px){
html,body{ font-size:14px;}
}

 

IOS系统上会有些出入，还需加个more.css来特殊定义下
@media only screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio:2)
{
...
}

 

@media screen and （max-width：320px） and （max-height：480px）{/iphone4，4s/}
@media screen and （max-width：320px） and （max-height：568px）{/iphone5/}
@media screen and （max-width：375px） and （max-height：667px）{/iphone6/}
@media screen and （max-width：414px） and （max-height：736px）{/iphone6s/}

width：视口宽度；

height：视口高度；

device-width：渲染表面的宽度；

device-height：渲染表面的高度；

orientation：检查设备处于横向还是纵向；

aspect-ratio：基于视口的宽高比；

device-aspect-ratio：基于设备渲染平面的宽高比；

color：每个颜色的位数；

color-index：设备的颜色索引表中的颜色数；

resolution：用来检测设备或打印机的分辨率；

scan：电视机的扫描方式；