说明 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%