移动端适配的解决方案

原文参考链接：
https://github.com/amfe/article/issues/17

移动端适配的flexible解决方案：
https://github.com/amfe/lib-flexible

基本概念：

1、物理像素
物理像素就是设备上的像素点。

2、设备独立像素
这是一个虚拟像素，可以认为是计算机坐标系统中的一点。会根据相关的系统转换为物理像素。

3、设备像素比（dpr）
设备像素比 ＝ 物理像素 / 设备独立像素

在JS中，可以通过window.devicePixelRatio获取到当前设备的dpi；在CSS中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio，-webkit-max-device-pixel-ratio进行媒体查询。

举个例子：

众所周知，iPhone6的设备宽度和高度为375pt * 667pt,可以理解为设备的独立像素；而其dpr为2，根据上面公式，我们可以很轻松得知其物理像素为750pt * 1334pt。

4、CSS中的rem

rem就是相对于根元素html的font-size来做计算。而我们的方案中使用rem单位，是能轻易的根据 html 的font-size计算出元素的盒模型大小。而这个特色对我们来说是特别的有益处。

解决方案flexible的实质：

动态改写meta标签
给html元素添加data-dpr属性，并且动态改写data-dpr的值
给html元素添加font-size属性，并且动态改写font-size的值

另外，文本字号不建议使用rem

显然，我们在iPhone3G和iPhone4的Retina屏下面，希望看到的文本字号是相同的。也就是说，我们不希望文本在Retina屏幕下变小，另外，我们希望在大屏手机上看到更多文本，以及，现在绝大多数的字体文件都自带一些点阵尺寸，通常是16px和24px，所以我们不希望出现13px和15px这样的奇葩尺寸。

如此一来，就决定了在制作H5的页面中，rem并不适合用到段落文本上。所以在Flexible整个适配方案中，考虑文本还是使用px作为单位。只不过使用[data-dpr]属性来区分不同dpr下的文本字号大小。

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;
}