随着网络技术的日益发展，各种新的技术也在不断的发展中。作为网页设计师和前端开发者，我们没有办法知道所有的新技术。有一些我们不常用但是十分重要的技术，是我们十分必要了解和学习的。
在这个教程里，将和大家分享一些我们不常用，但又十分重要的CSS技术。这些技术是关于CSS中的测量单位，例如：像素和em，有一些单位可能你都未曾听说过。
rem
我们将从一些你可能熟悉的单位开始讲解。em用于定义当前的font-size的单位。如果你设置了body元素的字体大小，那么body内任何元素的字体大小都可用em来做为相对单位。
body {
font-size: 14px;
}
div {
font-size: 1.2em; // calculated at 14px * 1.2, or 16.8px
}
这里，我们说div中的font-size为1.2em。在这个例子中，根元素的字体大小是14像素，那么1.2em的字体大小就是14px * 1.2 = 16.8px。
然而，在级联嵌套的em结构中，每一级的字体大小是怎样计算的呢？例如下面的例子：每一级div都继承他的父div的font-size，这样，得到的结构将是逐级增大的font-size。
Test
Test
Test
虽然这可能是某些情况下需要的结果，但是大多数情况下，你需要的仅仅是单一的度量尺寸。在这个例子中，你应该使用rem。rem中的“r”代表的是"root"，意思是font-size的大小是相对于根元素的。在绝大多数情况下，"root"指得是html元素。
html {
font-size: 14px;
}
div {
font-size: 1.2rem;
}
在前面的三级嵌套结构div中，字体大小都是16.8px。
Good for Grids
rems不仅仅对字体大小有用。举个例子，你可以在网格系统中基于字体大小使用rem。这将时你能够更好的控制字体的大小和页面的缩放。
.container {
width: 70rem; // 70 * 14px = 980px
}
理论上，这种设计能够让你更好的控制界面和内容大小。然而，它不一定在每一个地方都能发挥很好的作用。
vh 和 vw
响应式的网页设计依赖以百分比的规则应用。然而，CSS的百分比规则并不是所有问题的最佳解决方案。CSS的宽度是相对于最接近的父元素，如果你想使用窗口的宽度和高度来代替父元素的宽度和高度该怎么办呢？这正是提供vh和vw的作用。
vh元素等于1/100窗口的高度。例如，如果窗口的高度为900px，那么，1vh就等于9px，同理，如果窗口的高度等于750px，那么1vh等于7.5px。
想象一下，如果你需要一个标题占满整个屏幕的宽度，那么你可以设置font-size的单位为vw，这样标题的大小将随着屏幕的大小而缩放。
Settle down? Are you kidding?
I’m at the top of my game!
- Elastigirl
body {
background: #ff5722;
padding: 1em 0;
color: #64ffda;
}
h2 {
font-size: 6vw;
margin-bottom: .2em
}
vmin 和 vmax
vh和vm总是相对于屏幕的宽度和高度，vmin和vmax则是相对于他们的最大或最小宽度和高度。例如：如果浏览器设置宽度为1100px，高度设置为700px，那么，1vmin等于7px，1vmax等于11px。但是如果宽度设置为800px，高度设置为1080px，那么，1vmin等于8px，1vmax等于10.8px。
那么，什么情况下使用这些单位？
想象一下你需要一个元素在屏幕中一直可见，使用vmin作单位，值小于100就可以实现。例如，一个触摸屏的正方形的元素可以像下面这样定义：
.box {
height: 100vmin;
width: 100vmin;
}
如果你需要一个正方形的元素总是覆盖整个屏幕，那么可以通过vmax来设置：
.box {
height: 100vmax;
width: 100vmax;
}
这些规则的组合提供非常灵活的方式给你使用屏幕的大小。
ex 和 ch
ex和ch这两个单位和em和rem相似。依赖于当前字体和字体的大小。但是，与em和rem不同的是，ex和ch也依赖于font-family。它们都是基于确定的字体而言的。
ch或者说是字符单位被定义为0字符的“advanced measure”宽度。这里有一些关于这方面的非常有意思的探讨：Eric Meyers's blog.它的中心思想是，给定一个等宽字体，在一个包含N个方形字符宽度的容器中，例如：width: 40ch;，总能够在里面放置包含40个规则的字符的字符串。
ex单位被定义为：当前x-height的高度em高度的一半。x-height是给定字体的x字符的小写字母的高度。
x-height; the height of the lower case x (read more about The Anatomy of Web Typography)
有许多地方使用这种单位，大多数是在微调字体中使用。例如，sup元素，可以使用1ex将上标或下标元素放的更上或更下。默认浏览器使用vertical-align规则来指定上标或下标，你可以像下面这样来控制它们：
sup {
position: relative;
bottom: 1ex;
}
sub {
position: relative;
bottom: -1ex;
}
更多相关阅读：
156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
