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}