CSS单位px、em、rem、vh、vw、vmin、vmax

1、px：相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
2、em：相对长度单位。相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
3、rem：相对长度单位。r’是“root”的缩写，相对于根元素的字体大小
图示：

4、vh and vw：相对于视口的高度和宽度，而不是父元素的（CSS百分比是相对于包含它的最近的父元素的高度和宽度）

• 同屏幕等高的框：.slide { height: 100vh }
• 与屏幕同宽的标题，h1{ font-size:100vw }

5、vmin and vmax：关于视口高度和宽度两者的最小值或者最大值。

• 有一个元素，你需要让它始终在屏幕上可见
  .box { height: 100vmin; width: 100vmin; }
  

• 让这个元素始终铺满整个视口的可见区域
  .box { height: 100vmax; width: 100vmax; }