写手机页面的准备工作

(这篇可能与你想要找的东西更接近一些)手机端html页面制作需要了解的东西集合

首先页面中单位不再是用 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"/>

原文地址:https://www.cnblogs.com/maixi/p/4554226.html