media query 开发总结

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

IOS系统上会有些出入，还需加个more.css来特殊定义下
@media only screen and (max-device- 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：电视机的扫描方式；