什么是rem?
rem（root em） 是一个相对单位，类似em单位。
什么是em
em 是相对于父元素字体大小的倍数，例如： 设置某元素的父元素font-size为 10PX 如果设置该元素的宽度为 10em 那么 就相当于把宽度设置为100px 。
例如：
<style>
div{
font-size: 10px;
}
p{
width: 10em;
height: 10em;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
58A7E163-DFCD-4E29-9F76-A68136D3F9FD.png
通过以上案例，我们可以知道em的作用，那么rem 代表的是 root em ，也就是说rem 是相对于根元素的字体大小。而根元素就是html。
例如：
<style>
html{
font-size: 20px;
}
p{
width: 10rem;
height: 10rem;
background-color: blue;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
得到的结果为：
image.png
通过这个技术，我们就可以让每一个元素都使用rem 单位来定义大小，这样在适配不同移动设备的时候，我们就只要修改html 的font-size 就可以做到让所有的元素都能够进行相应的适配。（比如： 设备屏幕大的时候，就设置html 的font-size 大一些，那么页面中所有的元素的宽、高、字体大小、都能够相应地变大）。
em 也是相对单位，为什么不直接使用em来适配移动端设备呢？
因为em 是相对父元素的，所以如果使用em 进行适配的话，那么就要对每一个父元素都要进行修改，这样做效率会非常低而且也不利于维护。
而我们又是怎么让html 根据不同移动端设备来定义font-size 呢？
这个时候我们就需要用到CSS3中的 @media 功能
读者可查看我的另一篇文章。里面有详细介绍了@media功能的使用
https://www.jianshu.com/p/2b564dbfeee1
