rem是什么？响应式布局中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.代码实现