关于写手机页面demo的准备工作

标签：

写手机页面，存在不同的手机屏幕分辨率的问题，因此，怎样做到统一的画面展示，是我想要寻找的答案。

虽然也搜寻过一些例子，不过还是不确定那种会更好。

目前，想来做个笔记，记录其中的一个。

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

关于写手机页面demo的准备工作

标签：

原文地址：http://www.cnblogs.com/wzzl/p/4555372.html