说明 1px、1em、1rem、1vw、1vh 的区别
| 单位（units） | px | em | rem | vw | vh |
|---|---|---|---|---|---|
| 相对单位/绝对单位 | 绝对 | 相对 | 相对 | 相对 | 相对 |
| 含义 | 像素 | 相对于父元素字体大小（倍数） | 相对于根元素字体大小（倍数） | 相对于视口的宽度（百分之 1 的倍数） | 相对于视口的高度（百分之 1 的倍数） |
| 举例 | - | 父元素字体大小 16px， 则子元素中 1em=16px |
根元素字体大小 16px， 则当前元素中 1rem=16px |
视口宽度为 1000px，则 1vw=10px | 视口高度为 500px，则 1vh=5px |
- 通常来说，
html元素是根元素 - 1
vw相当于视口宽度的 1%；1vh相当于视口高度的 1%