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

2015-06-07 21:01:16:  

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

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

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

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

精品书籍

更多

HTML5与CSS3权威指南代码清单
Sass和Compass设计师指南
JavaScript框架高级编程