一、字体单位

1. em

• font-size：参照父元素的字体大小。
• width、padding、margin：就近原则。自身设置了 font-size 就参照本身的 font-size，没有的话参照父元素的 font-size。

2. rem

• 可以理解为 root em。相对于根元素的 font-size。

二、视口单位

1. vw、vh

• PC端：浏览器可视区域。
• 移动端：布局视口为基准。(视觉视口、理想视口)

2. 应用场景

• 父元素没有设置高度，又想让盒子能兼容各种设备，此时用视口单位。

.father {
  width: 100vw; /* 此时宽度为可视区的100% */
  height: 20vh; /* 此时高度为可视区的20% */
}

3. vmin、vmax

• vmin：视口宽高的最小值
• vmax：视口宽高的最大值
• 需求：一个广告，无论什么样尺寸屏幕，让广告完全显示在页面中。

.box {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vmin;
  height: 100vmin;
  background-color: red;
}

三、百分比