2.1 相对值的好处

CSS为网页带来了后期绑定（late-binding）的样式：直到内容和样式都完成了，二者才会结合起来。这会给设计流程增加复杂性，而这在其他类型的图形设计中是不存在的。不过这也带来了好处，即一个样式表可以作用于成百上千个网页。此外，用户还能直接改变最终的渲染效果，比如用户可以改变默认字号或者缩放浏览器窗口。

在早期的计算机应用开发程序（以及传统的出版行业）中，开发人员（或者出版商）明确知道其媒介的限制。一个典型的程序窗口可能宽400px、高300px，一个页面可能是宽4英寸、高6.5英寸。因此，当开发人员设置应用程序的按钮和文字布局时，他们能精确地知道元素在屏幕上的大小和留给其他元素的空间。在网页上，一切都变了。

2.1.1 那些年追求的像素级完美

在Web环境下，用户可以设置浏览器窗口的大小，而CSS必须适应这种窗口大小。此外，当网页打开后，用户还可以缩放网页，CSS还需要适应新的限制。也就是说，不能在刚创建网页时就应用样式，而是等到要将网页渲染到屏幕上时，才能去计算样式。

这给CSS增加了一个抽象层。我们无法根据理想的条件给元素添加样式，而是要设置无论元素处于任意条件，都能够生效的规则。现在的Web环境下，网页需要既可以在4英寸的手机屏幕上渲染，也可以在30英寸的大屏幕上渲染。

在很长时间里，网页设计者通过聚焦到“像素级完美”的设计来降低这种复杂性。他们会创建一个紧凑的容器，通常是居中的一栏，大约800px宽。然后再像之前的本地应用程序或者印刷出版物那样，在这些限制里面进行设计。

2.1.2 像素级完美的时代终结了

随着技术的发展，加上制造商推出高清显示器，像素级完美的方式逐渐走向了终点。在21世纪初，很多人开始讨论是否可以安全地将网页宽度设计成1024px，而不是800px。随后，人们又开始讨论同样的话题，是否要将网页宽度设计成1280px。当时我们得做出选择，到底是让网页宽于旧计算机，还是窄于新计算机。

等到智能手机出现后，开发人员再也无法假装每个用户访问网站的体验都能一样。不管我们喜欢与否，都得抛弃以前那种固定宽度的栏目设计，开始考虑响应式设计。我们无法逃避CSS带来的抽象性。我们得拥抱它。

CSS带来的抽象性也带来了额外的复杂性。如果给一个元素设置800px的宽度，在小窗口下会是什么样？水平菜单如果无法在一行显示会是什么样？在写CSS的时候，我们既要考虑整体性，也要考虑差异性。当有很多方法解决同一个问题时，我们要选择能够兼顾更多情况的方法。

相对单位就是CSS用来解决这种抽象的一种工具。我们可以基于窗口大小来等比例地缩放字号，而不是固定为14px，或者将网页上的任何元素的大小都相对于基础字号来设置，然后只用改一行代码就能缩放整个网页。下面来看看CSS是如何实现这些功能的。