移动端网页布局之rem

1、我理解的rem布局

首先，假设我现在要在iphone6里面布局，那么设备宽度deviceWidth=375px(通过document.documentElement.clientWidth获取，也可以用document.documentElement.getBoundingClientRect().width获取)，默认设计稿宽度designWidth=750px；设备宽度与设计稿的比值ratio = 375/750=0.5；

rem适配页面的原理，实际上是将设计稿等比例缩放，而这个缩放值就是上面的ratio；也就是说设计稿里的所有元素只要乘以ratio，就可以适应所有设备的尺寸了。那么我们怎么样才能让每一个元素都乘以ratio呢？

我们先要理解rem单位，它是根元素html的fontsize值;如果我们把根元素的fontsize值设置为ratio 'px'，那么1rem = ratio  'px'，然后将代码中元素的宽度(高度)值设置为rem单位，是不是就可以让所有元素都等比例缩放了。这就是rem适配核心。

那么设计稿100px的元素，就直接写100rem就行了；因为rem单位会自动乘以ratio转换为相应的px值;是不是很完美！

等等，上面的ratio为小数，这里是0.5，那么html的fontsize的值也是0.5px，一般情况下，