转自：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：
上面知道，一旦某个节点的字体大小发生变化，其他节点也随之变化，所以不合适，但是用来处理字体还是绝妙的。
