转自：https://www.cnblogs.com/leaf930814/p/9059340.html

　1、em

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

　　比如父元素font-size:12px;

　　自身元素如果写成：font-sise:2em;则自身元素用px表示就是24px（相对父元素字体大小）;

　　但是自身元素设置：width:2rem,那么自身元素用px表示就是48px（相对自身字体大小）；

2、rem

rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN

　　比如根元素（html）设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px；

　　如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小，一般是12px；

3、vm/vh

vw ： 视口宽度的 1/100；vh ：视口高度的 1/100 —— MDN

　　在pc端，视口宽高就是浏览器得宽高；

　　在移动端，这个还不太一样，不过一般设置：

1<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

关于rem：

rem是一种弹性布局，它强调等比缩放，100%还原。它和响应式布局不一样，响应式布局强调不同屏幕要有不同的显示，比如媒体查询。

关于em：

上面知道，一旦某个节点的字体大小发生变化，其他节点也随之变化，所以不合适，但是用来处理字体还是绝妙的。