不信你不会CSS相对单位 - rem，em，vh，vw

html-css010

不信你不会CSS相对单位 - rem，em，vh，vw,第1张

首先，我们要知道浏览器是不会直接识别CSS相对单位的。我们应该清楚浏览器在拿到相对单位以后是怎样换算成最终可以识别的px形式的。

接下来简要介绍一下这几个相对单位，然后用一个例子来让大家清楚换算过程。

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