em
继承父元素大小关系，2em 则为父元素大小的两倍 受自己上级节点影响
<div class="div" style="font-size:20px;">div 标签中的文字大小为 20px
<p class="p" style="font-size:2em">P 标签中的文字大小为 2em
</p>
</div>
效果如下
div 标签中的文字大小为 20px
P 标签中的文字大小为 2em span标签中的文字大小为0.5em
rem
就是相对于根节点来进行缩放，如果有嵌套的关
系，嵌套关系的元素的字体大小始终按照根节点的字体大小进行缩放
<style>
html{font-size:16px;}
.div{font-size:30px;background-color:pink;padding:50px;}
.p{font-size:1rem;}
.span{font-size:0.5rem;}
</style>
<div class="div">div 标签中的文字大小为 30px
<p class="p">P 标签中的文字大小为 1rem
<span class="span">span 标 签 中 的 文 字 大 小 为
0.5rem</span>
</p>
</div>
div 标签中的文字大小为 30px
P 标签中的文字大小为 1rem span 标 签 中 的 文 字 大 小 为 0.5rem
这个rem继承的是html的font-size 默认为16px 这才是根节点
vw 和 vh
视窗的宽度和高度，相当于屏幕宽度和高度的 1%
处理宽度的时候%单位更合适，处理高度的话 vh 单位更好
vmin 和 vmax
关于视口高度和宽度两者的最小值或者最大值。
如果你要让这个元素始终铺满整个视口的可见区域：
.box {
height: 100vmax;
width: 100vmax;
}
