rem和em区别

一、rem特点：

1、rem根据html根目录的字体大小来计算的；

2、rem不仅可设置字体大小，也可以设置元素宽高属性

3、改变根目录下的字体大小，下面字体大小都会改变

rem举例：

<div class="box"><div class="middle"><div class="inner"></div></div></div>
html{ font-size:12px;}
.box{ font-size:3rem;//相当于36px}
.middle{ font-size:2rem;//相当于24px}
.inner{ font-size:1rem;//相当于12px}

二、em特点
根据父元素的字体大小来计算的
em举例：
<div class="box"><div class="middle"><div class="inner"></div></div></div>
.box{ font-size:12px;}
.middle{ font-size:2em;//相当于24px}
.inner{ font-size:1em;//相当于24px}