rem的原理和使用

rem的定义：
rem是相对长度单位。是根元素（html）的font-size值的的一个css单位（适配单位rem）。

如：一个页面html中设置了font-size的值，使用rem即为这个已设置值的倍数。
eg: html设置font-size: 20px; 可知1rem=20px,使用时即可计算转化为rem的倍数。

html{
font-size: 20px;
}

由下列两张图可清晰看出此时rem的值为20px：


rem的使用：
rem的移动适配 :配合使用可以动态设置rem属性可以
举个列子：

设计稿宽度：400px
移动设备：400px
首先，通过设计稿宽度，设置html的 font-size的值为 移动设备 / 设计稿宽度 * x = x px（x可为任意值，下方实例中使用为10，即 1rem = 10px）。
当相同的代码运行在屏幕为小于400px的设备上时，js动态设置html的 font-size= 移动设备 / 设计稿宽度 * x，整体比例不变，以此达到移动适配的效果
eg:

代码：

测试实例图片：



可以观察到当移动端宽度小于400px时，字体随界面等比例缩小。与界面大小相适应，大于400px时，保持原样，当然也可以设置为等比例扩大或缩小。

rem是相对长度单位，配合js使用可以使得界面字体自适应于移动设备按照比例扩大或缩小。