响应式布局中rem的用法

1.rem是什么呢？

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。看到rem你们必定会想起em单位，em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很类似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。 

2.为何要用rem呢？

首先咱们要了解移动端最麻烦的是什么？因为不一样分辨率的适配，具体来讲，有的屏幕宽750px，有的屏幕宽640px，有的甚至更宽，致使若是你写固定px，那么要么小的放不满，要么大的有大片留白。然而咱们用rem能够有效解决这个问题。

3.如何用rem实现页面等比例适应设备呢？

解决方法：rem + less + 媒体查询

（1）动态设置html标签font-size大小

假设设计稿是750px，而后咱们把整个屏幕划分红15等份，每一份做为html中的字体大小，这里一份就是50px，那么当设备为750px时，一个100*100px的页面元素在750px的屏幕下，它转换为rem为单位就是2*2rem，长和宽的比例是1:1；当设备为320px时，html字体大小为21.33px，一个100*100px的页面元素在320px的屏幕下，为2*2rem，2rem=42.66px，长和宽的比例仍旧是1:1，这样咱们就能实如今不一样屏幕下，页面元素盒子等比例缩放的效果。

（2）页面元素的rem值=页面元素值（px）/（屏幕宽度/划分的份数）

注：1.屏幕宽度/划分的份数 就是html中的font-size的大小

      2. 关于媒体查询和less可自行百度

4.代码实现