rem和em

一，什么是rem

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位。

rem的用法

一般情况下，是这样子使用的

1 html{font-size:62.5%;} 
2 body{font-size:12px;font-size:1.2rem ;} 
3 p{font-size:14px;font-size:1.4rem;}

注意：rem是只相对于根元素html的font-size，即只需要设置根元素的font-size，其它元素使用rem单位设置成相应的百分比即可；浏览器的默认字体高都是16px。
 

二，什么是em

em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过rem计算的规则是依赖根元素,em是依赖父元素计算。
em的应用

em也可以用于设置盒模型的属性的响应式
<div class="div1"></div>  
<hr>
如果给当前元素设置font-size: 设置 则重新定义像素
<div class="div2"></div> 
因为盒子的大小使用em,所以只需要设置盒子的font-size就可以动态的设置大小了

注意：当前p元素的 font-size: 为1em是 则继承了body设置的16px；如果body设置20排序，则当前元素的1em为20px；em也可以用于任何元素

三，rem和em的相同点和不同点

1.相同点
都是相对单位，目的都是为了在不同的屏幕上显示的效果尽可能的一致，换句话讲就是在大屏幕上进行整体放大，小屏幕上进行整体缩小。

2.不同点
em 是相对当前元素设置font-size,需要设置每个元素的font-size,太零散，不好统一进行管理。
rem 是相对根元素（html标签）设置font-size，只需要设置跟元素的font-size，便于统一管理。