前言

大家最熟悉也最经常用的是像素（px），这是一个绝对单位，在不同场景下所呈现的大小是一样的。与之相对的，就是相对单位，例如em, rem，相对单位会因外部的因素改变而跟着改变。

很多前端开发者不太喜欢相对单位，尤其是em，因为em的值看起来不可预测而且没有px那么清晰。不过对于响应式开发相对单位是很重要的，所以接下来我将详细解释相对单位，方便我们以后可以更简单、容易、正确的使用它们。

1. em和rem

em是最常用的一个相对单位，它的实际大小是根据font size来决定的。1em的值为当前元素的字体大小，它的值得具体变化依赖于它所应用的那个元素。举个例子，

small元素padding和border-radius的实际大小为12px;而Large元素的padding和border-radius的实际大小为18px。

这就是em有意义的地方，你可以定义一个元素的大小，并且根据font size来缩放整体。

我们刚才说过，em的大小是根据font-size来决定的，那么font-size: 1.2em 代表的意思是什么呢？font size的em值取决于它继承的font-size。举例如下：

slogan的font size为1.2em，转化为px就需要从继承的font size 18px计算，1.2 rem = 18px*1.2=21.6px

rem是根据em演变过来的，可以写成root em，这样就比较容易了理解了。在DOM节点树中，元素是顶级节点，也就是root node。以及他们的孩子，孙子都是的子节点。这些子节点，孙子节点中，rem的值都取决于根节点。根节点的值是固定的，此时在文档的任何地方rem的值将保持不变。

视口单位也是一个相对长度单位。那么视口指的是什么呢？浏览器窗口的可视区域就是视口，不包括浏览器的地址栏、工具栏和状态栏。做一个简单的说明：

vh— 视口高度的1%

vw—视口宽度的1%

vmin—视口宽度和高度中较小值的1%(IE9 中要写成vm)

vmax—视口宽度和高度中较大值的1% (目前在IE 和 Edge浏览器中不支持)

也就是说浏览器可视区域的高度为100vh，宽度为100vw。50vh就是视口高度的一半，25vw是视口宽度的1/4。

一些属性允许没有单位的值存在，这些属性包括：line-height , z-index ,font-weight（700等价于bold，400等价于normal）。还可以在长度单位上使用无单位的0，因为0px等价于0%或0em。

line-height属性有无单位都可以，不过我们应该都使用无单位的数字，这是因为他们的继承会产生差异。我们举一个例子，

这时候div继承来自body的行高1.5，字体大小为32px（2em x 16px，16px为浏览器的默认字体大小），行高的值就是48px(32px x 1.5)，这个时候文字之间会有一个合适的间距。如果我们给line-height加上单位，可能会有意料之外的结果出现，如下：

这时候div继承来自body的行高1.5em,也就是 24px(1.5em x 16px )，字体大小为 32px，因此文本之间会相互重叠。

当使用无单位的数字时，声明的值是继承的，这意味着每个继承子元素的line height值都将被重新计算。

自定义属性是2015年候选推荐发布的CSS新规范，该规范将变量的概念引入到CSS中。你可以声明一个变量并给它赋值，然后可以在整个样式表中引用这个值。目前的主流浏览器都支持自定义属性（除了IE），不过在一些浏览器中存在兼容性的问题，随着时间的发展，自定义属性一定会普及的。

如果你碰巧使用过支持变量的CSS预处理器，比如Sass（语法上很棒的样式表）或者Less，你可能会倾向于忽略CSS变量。不过新的CSS变量在本质上是不同的，并且比预处理器所能完成的任何事情都要灵活得多。

我们举一个使用自定义属性的例子，

自定义属性前面一定要加（--），以此来区分CSS属性，后面跟上你想定义的名字。用var()函数使用刚才所定义的 --brand-color 变量。

我们也可以使用javascript来改变自定义属性，这是Sass或者Less无法做到的。

var rootElement = document.documentElement;

rootElement.style.setProperty('--brand-color', '#000');

运行这段js代码，--brand-color 的值将会被更新为黑色。

在老的浏览器中，var()将会被忽视，因为无法识别。所以，应该使用一些兼容方案，例如：

color: black;

color: var(--brand-color);

欢迎大家评论留言，批评指正。未完待续~