rem
rem非常类似于em。em 被定义为相对于当前对象内文本的字体大小。例如：如果你给body设置了font-size，那么body的任何子元素（注意，是子元素）的1em就是等于body设置的font-size。
<div>test<div>
<style>
body {
font-size:14px;
}
div {
font-size:1.2em; //计算公式：14px * 1.2 = 16.8px
}
</style>
这里div字体大小是1.2em，就是他从body那里继承的字体大小（这里是14px）的1.2倍，结果就是16.8px。
但是，如果你用em一层一层级联得定义嵌套元素的字体大小又会花生什么事情呢？在下面这一小段代码里我们应用了和上面一样一样的CSS，每一个div都从它上一级父元素继承了字体大小，并且逐渐得增加，如下：
<div>
Test (14 * 1.2 = 16.8px)
<div>
Test (16.8 * 1.2 = 20.16px)
<div>
Test (20.16 * 1.2 = 24.192px)
</div>
</div>
</div>
<style>
body {
font-size: 14px;
text-align: center;
background: #ff5722;
}
div {
font-size: 1.2em;
color: #64ffda;
font-weight: bold;
padding: 2em;
}
</style>
效果图：
虽然在某些地方这正是我们想要的，但是通常情况下我们还是希望就依赖单一的相对度量单位就好。这时候，我们就可以使用 rem 了。‘r’是“root”的缩写，意思就是1rem等于根元素的字体大小；大部分情况下，根元素就是元素了。例如：
html {
font-size:14px;
}
div {
font-size:1.2rem;
}
这样在上面的那三个嵌套的div娃们的字体大小都是 1.2*14px = 16.8px 了。
适用于网格布局
Rem 不仅仅只是在设置字体大小上很方便。例如，你可以用基于html根元素字体大小的rem作为整个网格布局或者UI库的大小单位，然后在其他特定的地方用em单位。这样将会给你带来更多的字体大小和伸缩的可控性：
.container {
width:70rem; // 70 * 14px = 980px
}
概念上来说，这个方法的思想就是让你的界面根据你的内容进行缩放。但是，这样做并不是对所有的情况都有意义。
vh and vw
响应式web设计离不开百分比。但是，CSS百分比并不是所有的问题的最佳解决方案。CSS的宽度是相对于包含它的最近的父元素的宽度的。但是如果你就想用视口（viewpoint）的宽度或者高度，而不是父元素的，那该肿么办？ 这就是 vh 和 vw 单位为我们提供的。
1vh 等于1/100的视口高度。栗子：浏览器高度900px, 1 vh = 900px/100 = 9 px。同理，如果视口宽度未750， 1vw = 750px/100 = 7.5 px。
可以想象到的，他们有很多很多的用途。比如，我们用很简单的方法只用一行CSS代码就实现同屏幕等高的框。
.slide {
height:100vh;
}
假设你要来一个和屏幕同宽的标题，你只要设置这个标题的font-size的单位为vm，那标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果：
<h2>Settle down? Are you kidding?<br>I’m at the top of my game!</h2>
<p><em>- Elastigirl</em></p>
<style>
body {
background: #ff5722;
padding: 1em 0;
color: #64ffda;
}
h2 {
font-size: 6vw; /*这里的字体，就会跟着屏幕尺寸改变而改变大小*/
margin-bottom: .2em
}
</style>
vmin and vmax
vh和 vm 依据于视口的高度和宽度，相对的，vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值。比如，浏览器的宽度设置为1100px，高度设置为700px， 1vmin = 1px， 1vmax = 11px。如果宽度设置为800px,高度设置为1080px, 1vmin就等于8px, 1vmax则未10.8px。
那么问题来了，我们应该在什么场景下使用这两个单位呢？
假设有一个元素，你需要让它始终在屏幕上可见。只要对其高度和宽度使用vmin单位，并赋予其低于100的值就可以做到了。再来个栗子，可以这样定义一个至少有两个边触摸到屏幕的方形：
<style>
.box {
height:100vmin;
width:100vmin;
}
</style>
<style>
.box {
height:100vmax;
width:100vmax;
}
</style>
ex 和 ch
ex、ch单位与em、rem相似之处在于都依赖于font-size，但是ex、ch还依赖于font-family，基于font-specific来计算。
用一副图来解释这两种单位的含义：
这两种单位，有许多用途，大部分是用于印刷时的微调整。例如，sup、sub元素分别显示上标和下标，但是我们可以使用position和bottom模拟：
<style type="text/css">
body {
margin: 0;
padding:0;
}
.sup {
position: relative;
bottom: 1ex;
}
.sub {
position: relative;
bottom: -1ex;
}
</style>
<div>
AaB<span class="sup">b</span>CcXxD<span class="sub">d</span>EeFf
</div>
结合使用这些单位可以为我们提供一个新颖有意思的方式来灵活地利用我们视口的大小。
部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！
