移动端自适应方案

问题来源

传统web开发我们一般只需要用像素去描述dom的宽高，但考虑到移动端屏幕的尺寸千奇百怪，我们希望找到一种可以根据屏幕大小去自适应宽高的方案。

原理

• 除了font-size之外的其它css尺寸都使用了rem作为单位

方法

(1) 令页面宽度（device-width）等于设备逻辑像素，其中，device-width = 物理像素 / （dpr * scale） ， 所以，我们只需根据手机的 dpr 动态的去设置 scale

var scale = 1 / devicePixelRatio;
document.querySelector('meta[name="viewport"]')
.setAttribute('content','initial-scale=' + scale + ', 
maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no')

(2) 令页面 的 font-size ， font-size = deviceWidth / 10 + 'px' .

document.documentElement.style.fontSize = 
document.documentElement.clientWidth / 10 + 'px';

(3) 计算元素的尺寸
通过步骤二将视觉稿的页面分成10等分( 设置成10只是为了方便计算，这里实际上可以选择自己要分的份数 )，假设视觉稿是按照 360p 给的尺寸，那么我们 1rem 就表示 36 px , 那么当一个元素的尺寸为 72px * 36px ， 我们对于的rem尺寸应该是 2rem * 1rem
(4) 字体可能需要额外的媒体查询

div {
    width: 1rem; 
    height: 0.4rem;
    font-size: 12px; // 默认写上dpr为1的fontSize
}

[data-dpr="2"] div {
    font-size: 24px;
}

[data-dpr="3"] div {
    font-size: 36px;
}

注：

• 懒人可以使用淘宝的库
  https://github.com/amfe/lib-flexible
• 使用 sublime 的同学可以下载 cssrem这个插件，让你编码速度快到飞起.
  参考这里 http://www.cnblogs.com/olivianate/p/5328716.html

{
    "px_to_rem": 108, # 一般设置为 视觉稿 / 10
    "max_rem_fraction_length": 2,
    "available_file_types": [".css", ".less", ".sass"]
}