从pc端到移动端， 布局上最大的改变就是要兼容不同大小的设备。
pc端虽然针对不同的屏幕大小，我们常用固定网页宽度，整体居中来实现。
移动端则需要一套自适应的方案。
方案1 %
- 宽度用％代替px。
但这种实现css可读性很差，百分比布局的时候依赖父容器的大小， 值的计算不方便。
子组件之间如果同时有百分比和px，往往需要给百分比额外加容器。
方案2 rem
用rem单位代替％， （vh，vw）
方案1的缺点都没有了。
但还是有一些细节不如人意
为什么app上的border这么细，H5就不能细点吗？
从设计稿的px 到 rem还是需要一个计算。
方案3 手淘flexible
原文 https://github.com/amfe/lib-flexible
页面加载初始，引入一个js文件。
对不同设备设置其对应的dpi。 （设备像素比(device pixel ratio)）
＊设备像素比 ＝ 物理像素 / 设备独立像素
于是我们真正实现的页面大小是该设备能显示的物理像素大小。
然后通过 viewport 对网页缩放对应 dpi的倍数。
这种实现解决了 方案2中1px的问题。
- 在不同dpi下，同一个dom需要不同的px。
- 用sass封装了 px2rem， px2px来解决。
- 我们实际写样式时再也不需要计算了。
方案2的第二个问题也随之解决。
缺点， 在引入飞flexible的组件时很痛苦。
总结
能忍受1px问题的情况下，
方案2 ＋ px2rem足以。
追求完美可用方案3
3个方案与其说是解决方案，不如说是一个开发工具。
真正的什么时候去做自适应，什么要用px，什么用rem还是根据UI的要求和开发的经验。
1px问题详解
原来方案3的1px也有缺点。
