移动端Web适配的两种做法思路总结
看了几篇文章，理一下网易跟淘宝移动端适配的思路，主要是参考 从网易与淘宝的font-size思考前端设计稿与工作流
像素相关概念
物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
其值也就是我们常说的分辨率
设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
简称dip，也可以称为CSS像素
设备像素比(device pixel ratio)
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向网易的做法
目的
css中使用的尺寸与设计稿保持一致，body的宽度设为屏幕宽度
原理
将页面宽度定为屏幕宽度，通过设置html的font-size与使用rem来实现尺寸与设计稿一致
思路
- 假设设计稿宽度为640px
- 那么以设计稿为准，设置body的宽度为640px
- 由于使用rem单位，因此需要设置html标签的font-size
- 为计算方便，取100px为参照，所以body的宽度为6.4rem
- 由于设备的dip!=设计稿宽度，因此font-size=deviceWidth/6.4
- css尺寸为：设计稿标注尺寸/100
淘宝的做法
目的
页面大小与设计稿保持一致
原理
设置meta viewport中的scale保证页面大小与设计稿一致，使用rem
思路
- meta viewport中device-width的算法为：设备的物理分辨率/(devicePixelRatio * scale)
- 而每台设备的devicePixelRatio都是已知的，可通过window.devicePixelRatio获取
- JavaScript动态计算设置scale，包括initial-scale，maximum-scale，minimum-scale
- 动态设置html的font-size，为屏幕分辨率/10
- css尺寸为：设计稿标注尺寸/html的font-size
关于font-size能不能使用rem的问题
流云诸葛在文章中说font-size不能使用rem，要用media query，而实际上，网易的font-size也是有用rem来作为单位的。
那么为什么会说font-size不能使用rem呢？到底能不能用rem？
答案是能的。
说不能可能是因为在网页中有可能使用了点阵字体，也叫位图字体，由于位图的缘故，点阵字体很难进行缩放。
这个概念与矢量字体相对应。
网上有给出对于文字使用px的原因的文章
根据以下两个原因，对于文字使用px：
- 在大屏设备希望看到更多的文字
- 中文点阵最好是在12px，14px，16px这种尺寸，使用rem就会无法避免使用13px，15px尺寸，这样文字会显示的很奇怪
虽然如此，但没有使用点阵字体的话，在一些情况，比如在需要自适应的情况下，使用rem也是没问题的。
关于font-size的更新（2016-09-14 11:50）
前面说到font-size能不能使用rem，给出的答案是 能。
但是经过一番摸索，这边我还是建议字号用px来作为单位。
为什么呢，除了点阵字体的原因，我们在使用rem时，在不同设备的字体大小不一样，而比较适合阅读的字号大小是14px或16px之类。
比如：iPhone5的设计稿是640px，那么根据网易的做法，html的font-size就是50px，那么我们根据设计稿定义一段文本的font-size为0.16rem，换算成px就是0.16 * 50 = 8 px，这样，在4吋iPhone上看这段文本时，就会显得很小；如果设置成0.32rem，在4吋iPhone上看是正常了，但是在较大屏幕上看，又会显得太大。
还有一个原因，使用rem最终是转换成px的，这样，转换后的px就有可能出现存在小数的情况，这个时候就可能出现1px的不对称。
因此我们在给文本定义字号时还是使用px，应对不同设备，使用media query，或者像淘宝的那种做法，在html中加上data-dpr，算出当前设备的dpr，再根据不同dpr来区分文本字号大小。
.a{
font-size:12px;
}
[data-dpr="2"] .a{
font-size: 24px;
}
[data-dpr="3"] .a{
font-size: 36px;
}
