<body>
<div class="element"></div>
</body><style>
body {
font-size: 14px;
}
.element {
font-size: 16px;
width: 2em;
/* 2em === 32px */
}
</style>
rem Root element meter 根据根文档（ body/html ）字体计算尺寸
相对于根文档对象（ body/html ）内文本的字体尺寸而言，若未指定字体大小则继承为浏览器默认字体大小。
<body>
<div class="element"></div>
</body><style>
body {
font-size: 14px;
}
.element {
font-size: 16px;
width: 2rem;
/* 2rem === 28px */
}
</style>
ex 文档字符“x”的高度
相对于字符“x”的高度，通常为字体高度的一半，若未指定字体尺寸，则相对于浏览器的默认字体尺寸。
至于为啥是x，我TM也不知道。
<body>
<div class="x"></div>
</body><style>
.x {
height: 1ex;
overflow: hidden;
background: #aaa;
}
</style>
ch 文档数字“0”的的宽度
同上，相对于数字“0”的宽度。
<body>
<h1>定义一个宽度正好能装下10个0的容器：</h1>
<div class="0">0000000000</div>
</body><style>
.0 {
width: 10ch;
overflow: hidden;
background: #ccc;
}
</style>
一张图解释：
vh View height / vw View Width – 可视范围
相对于可视范围的高度和宽度，可视范围被均分为 100 单位的 vh/vw；可视范围是指屏幕可见范围，不是父元素的，百分比是相对于包含它的最近的父元素的高度和宽度。
假设设备可视范围为高度 900px，宽度 750px，则，1 vh = 900px/100 = 9px，1vw = 750px/100 = 7.5px。
<body>
<h1>article title</h1>
<div class="element"></div>
<div class="full-height"></div>
</body><style>
.element {
width: 50vw;
height: 80vh;
/* 如果屏幕高度为1000px，则该元素高度为800px，vw 同理 */
}
.full-height {
height: 100vh;
/* 轻易实现了与屏幕同等高度的元素 */
}
h1 {
width: 100vw;
/* 设置一个和屏幕同宽的标题，标题的字体大小就会自动根据浏览器的宽度进行缩放，以达到字体和viewport大小同步的效果。 */
