移动端布局

• 从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问题详解

http://mutian.wang/tech/1570

原来方案3的1px也有缺点。