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样式中的适配效果就可以实现。
网友评论