写手机页面的准备工作

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

首先页面中单位不再是用 px来写，而是em。

其次，medioadaption.css是需要的，这里是一个例子

@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)
{
...
}


最后页面头部不可缺少的还有：


<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