接下来简要介绍一下这几个相对单位，然后用一个例子来让大家清楚换算过程。
1. em
一般情况下，em是参考父级的字体大小来进行换算的。但是，对于长度（length，width，padding或者margin），这个单位参考的是当前的字体大小来换算的。
2. rem
rem是参考根级字体大小来换算的。
3. vh和vw
vh和vw都是根据视见区（view port）的百分比来计算的。
举个例子（一个例子说明以上几个相对单位的换算）：
总结：
1. 浏览器的默认字体大小是16px
2. 百分数和相对单位都会最终被换算成px。因为浏览器只能识别px；
3. em在用于长度单位的时候，参考的是当前的字体大小而非父级字体（这里很容易混淆）。
vh，是指CSS中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度。视口比例长度定义了相对于视口的长度大小，这是文档的可见部分。 当视口的大小被修改（通过更改桌面计算机窗口大小或旋转手机或平板设备的方向）时，只有基于Gecko的浏览器才动态更新视口值。
结合 overflow:auto，滚动条最终占用的空间大小不是减去视口大小之后的宽度，而overflow:scroll 才是。
ref： Web 技术文档 - CSS - Mozilla
