移动端的那些事

标签：

常见方式：

　　固定宽度(320)做法：这样前端倒是爽了，可是大页面两边有留白，小页面图标文字又会缩的很小，用户体验极其不好。

　　流式布局：其实就是用%，这样宽度倒还差不多，高度怎么搞？所以这种布局一般都是高度写死，显的很不协调，另外对设计也有很大的限制，另外还有兼容性方面的问题。

　　响应式布局：说白了就是利用CSS3中的Media Query（媒介查询），喊的很火，谁用谁知道，简直累死人不要命。

　　设置viewport进行缩放：以320宽度为基准，进行缩放，最大缩放为320*1.3 = 416，基本缩放到416都就可以兼容iphone6 plus的屏幕了。

　　<meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">

几个术语：

　　PPI：单位英寸像素数，现实世界的一英寸内像素数，决定了屏幕的显示质量

　　DPR：设备像素比率，物理像素与逻辑像素（px）的对应关系

　　Resolution：屏幕区域的宽高所占的像素数

REM等比例适配所有屏幕：通过一段js根据浏览器当前的分辨率改变根节点font-size的值

分辨率Resolution适配：

　　不同屏幕宽度，html元素宽高比和字体大小，元素之间的距离自适应，使用rem单位。

单位英寸像素数PPI适配：

　　使用rem单位，文字会发虚。段落文字，使用px单位，用media query或js来适配。标题文字可以直接使用rem单位。

设备像素比例DPR适配：

　　根据devicePixelRatio来修改meta标签的scale

详情参见：春华秋实

扯了那么多，其实我实际项目中是怎么做的呢？一句代码解决所有需求：

@media (max-width: 320px){
    html{ font-size: 3.125%; }
}
@for $i from 320 through 640 {
    @media (width:#{$i}px){html{font-size: $i/102.4 * 1%}}
}
@media (min-width: 640px){
    html{ font-size: 6.25%; }
}

说明：在640px的设计稿上，只需把测量到的所有px换成rem，例如测到的10px写到项目中就是10rem，其它尺寸设计稿修改一下即可。

移动端的那些事

标签：

原文地址：http://www.cnblogs.com/jiujiaoyangkang/p/4973534.html