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

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

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

1. em

一般情况下，em是参考父级的字体大小来进行换算的。但是，对于长度（length，width，padding或者margin），这个单位参考的是当前的字体大小来换算的。

2. rem

rem是参考根级字体大小来换算的。

3. vh和vw

vh和vw都是根据视见区（view port）的百分比来计算的。

---

举个例子（一个例子说明以上几个相对单位的换算）：

html, body {

font-size: 16px;    //浏览器默认值

width: 80vw;      // 宽度为视见区80%

}

header {

font-size: 150%;          // 父级字体大小 x 1.5 = 16 x 1.5 = 24px

padding: 2em;              // 当前字体大小 x 2 = 24 x 2 = 48px

margin-bottom: 10rem ;          // 根级字体大小 x 10 = 16 x 10 = 160px

height: 90vh;          // 宽度为视见区（View Port）90%

width: 1000px;

}

.header-child {

font-size: 3em;          // 父级字体大小 x 3 = 24 x 3 = 72 px

padding: 10%;            // 父级宽度 = 1000 x 10% = 100px

}

总结：

1. 浏览器的默认字体大小是16px;

2. 百分数和相对单位都会最终被换算成px。因为浏览器只能识别px；

3. em在用于长度单位的时候，参考的是当前的字体大小而非父级字体（这里很容易混淆）。