「这是我参与11月更文挑战的第25天，活动详情查看：2021最后一次更文挑战」
在css中，单位可分为相对长度单位和绝对长度单位
相对长度单位
相对长度单位规定相对于另一个长度属性的长度。相对长度单位在不同渲染介质之间缩放表现得更好
em:
em是字体排印的一个单位，相对于元素的字体大小（font-size）
当使用em单位时，像素值是em值乘以使用em单位的元素的字体大小。 例：默认字体大小是16px，10em 将等同于 160px，即 10 × 16 = 160
根据W3C标准 ，em是相对于使用em单位的元素的字体大小，通常为相对于父元素字体大小
rem:
也是字体排印的相对长度单位，相对于根元素的字体大小（font-size）
根 html 元素将继承浏览器中设置的字体大小，除非显式设置固定值去覆盖。 所以 html 元素的字体大小虽然是直接确定 rem 值，但字体大小可能首先来自浏览器设置。 因此浏览器的字体大小设置可以影响每个使用 rem 单元以及每个通过 em 单位继承的值,如果没有设置 html 字体大小时，则相对于浏览器单位字体长度
和em区别: em是相对于使用em单位的元素的字体大小，通常为相对于父元素字体大小，rem相对于html根元素
视口高度/宽度
视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。
视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport, “视区”所指为浏览器内部的可视区域大小，即window.innerWidth/window.innerHeight大小，不包含任务栏标题栏以及底部工具栏的浏览器区域大小。
vh:
等于视口高度的...%,1vh 等于1/100的视口高度
100vh等于整个视口高度
vw:
等于视口宽度的...%,1vw 等于1/100的视口宽度
100vw等于整个视口宽度
