rem布局

前言：

rem单位是根据html标签的fontSize属性来变化的，属于一个相对单位。比如html的fontsize是12px,则2rem就是(12 * 2)px.。主要作用是解决移动端适配的问题。包括元素宽高和字体大小，达到可以让元素的宽高或者字体大小根据屏幕的宽度来自适应或成正比例变化。

原理：

假设设计稿宽度750px,一个元素的宽度为50px;那么当实际屏幕宽度为640px时，该元素需要成比例缩小，也就是50 * （640 / 750）px。

在上面的基础上，我们假设屏幕宽度为750px的html标签的fontsize为100px;那么640px的html标签的fontsize为 100 * （640 / 750）px。此时1rem = 100 * （640 / 750）px。那么假如有个元素在750上宽度为0.5rem(50px)，那么在640上宽度为0.5rem(0.5 * 100 * (640 / 750))，正好和上面的50 * （640 / 750）px相等，达到了等比缩放的目的。

结论：

表面上是rem布局达到了等比缩放的目的，其实是动态控制html元素的fontSize属性达到了等比缩放的目的。