写手机页面,存在不同的手机屏幕分辨率的问题,因此,怎样做到统一的画面展示,是我想要寻找的答案。
虽然也搜寻过一些例子,不过还是不确定那种会更好。
目前,想来做个笔记,记录其中的一个。
首先页面中单位不再是用 px来写,而是em。
其次,medioadaption.css是需要的,这里是一个例子
@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)
{
...
}
最后页面头部不可缺少的还有:
<meta name="format-detection" content="telephone=no" />
<meta name = "viewport" content ="width=device-width,initial-scale=1.0,user-scalable=no,target-densitydpi=device-dpi"/>