REM是什么？

rem是一个相对于根元素字体大小的css单位，官方解释是font size of the root element，就是根据网页的根元素来设置字体大小（em则是根据父元素设置的）
不仅可以适用于字体，同样可以用于width height margin这些样式的单位
html根元素的默认font-size是16px，在没有人为修改的情况下我们来看以下代码：

<div class='con'></div>
.con
    {
        width: 10rem;
        height: 10rem;
        background-color: red;
    }

设置div的宽高都是10rem，结果如下图：

这个div框的宽高刚好是160px(16*10)，那么我们修改一下默认根元素的font-size呢

html 
    {
        font-size: 20px;
    }

这个时候div的宽高就变成了200px(20*10)

这就是rem的特性，即根据根元素的font-size值来改变自身的值，因此，当给html设定不同的值时，css样式中的适配效果就可以实现。