rem(root em)
如果你给body设置了font-size字体大小，那么body的任何子元素的1em就是等于body设置的font-size
demo：
body { font-size:
14px; }
div { font-size: 1.2rem; // calculated at 14px * 1.2, or 16.8px}
em: 从它上一级父元素继承了字体大小，并且逐渐得增加。
Demo：
Html:
<body>
<div class=”div1”>
<div class=”div2”>
<div class=”div3”>
</div>
</div>
</div>
</body>
body{ font-size：14px; }
div1{font-size:1.2em};//1.2*14PX
div2{font-size:1.2em}//1.2*1.2*14px
div3{font-size:1.2em}//1.2*1.2*1.2*14px
vh and vw 这两个字体单位可叼了
响应式web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该肿么办？ 这就是 vh 和 vw 单位为我们提供的。
Demo: 只用一行CSS代码就实现同屏幕等高,等宽的框
.slide {
height: 100vh;
100wh;
}
vmin and vmax : vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值
浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 7px， 1vmax = 11px。
如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px