【CSS in Depth 2 精译】第二章 相对单位 + 2.1 相对单位的威力

第二章 相对单位

本章概要

• 相对单位的广泛用途
• 驾驭令人头疼的 em 和 rem
• 使用视口的相对单位
• 自定义属性简介

说起 长度（length） 值的设置，CSS 提供了丰富多样的实现方案。其中最熟悉、或许也是最容易掌握的，莫过于像素（pixels）了。像素是一种 绝对 单位；也就是说，5px 无论搁哪儿都是 5 像素大小；而另一些单位，比如 em 和 rem，则不属于绝对单位，而是 相对 单位。相对单位的值会根据外部因素而改变；例如，2em 的具体含义，就取决于其所对应的元素，有时甚至取决于它所对应的 property 属性。这么一闹，相对单位自然也就更难掌握了。

定义

长度（Length） 是 CSS 表示衡量某段距离大小的样式值的正式称谓。它是一个后面带着单位的数字，例如 5px。百分比取值（Percentages）与长度类似，但严格意义上讲，它并非长度。

即便是经验丰富的 CSS 开发人员，在处理长度时通常也不喜欢使用相对单位——相对单位的取值可能会发生改变，这使得它们看起来比绝对单位更加不可预测，用起来也没有像素那么直观。本章将为您揭开相对单位的神秘面纱。首先需要正名的，相对单位带给 CSS 的独特价值，并帮助您理解它们；然后剖析相对单位的工作原理，并进一步演示如何驾驭相对单位看似无法预测的本性。使用恰当的话，相对单位也可以为我所用，使代码更简洁、更灵活、也更简单。

2.1 相对单位的威力

CSS 为网页引入了样式 延迟绑定（late-binding） 机制：网页内容与对应的样式可以在二者的创作分别完成以后再整合到一起。这无疑增加了设计过程的复杂度——这样的机制在其他类型的图形设计中是不存在的；但这也让 CSS 具备更强大的功能：只需一张样式表，就能同时对成百上千个页面生效。此外，用户还可以直接改变页面渲染的最终效果，例如修改默认字号或者调整浏览器窗口大小。

在早期的计算机应用程序开发（以及传统的出版行业）中，开发人员（或者出版商）预先知晓其媒介的确切参数：一个典型的程序窗口应该宽 800 像素、高 500 像素；一个页面应该有 4 英寸宽、6½ 英寸高等等。这样一来，当开发人员在给应用程序的按钮和文本做布局时，他们可以精确预判各元素在屏幕上的大小，并精确计算需要给其他元素预留多大的空间。而在网页上，情况却并非如此。

2.1.1 响应式设计的兴起

在 Web 环境下，用户可以任意指定浏览器的窗口大小，CSS 也必须适应这些变化的尺寸；此外，在网页打开后，用户还可以进一步缩放页面，此时 CSS 同样需要适应新的约束条件。这就意味着 CSS 样式不能在创建页面时就提前写死；而必须等到页面被渲染到屏幕后，再让浏览器动态计算相应的样式才有意义。

这就为 CSS 平添了一个抽象层出来。人们不能根据理想条件给元素添加样式；而是要让设计的样式规则，能对任意条件下的目标元素始终生效。就目前的 Web 环境而言，一个页面必须既能够在 4 英寸的手机屏幕上渲染良好，也必须在 30 英寸的显示器上呈现出想要的效果。

像素、磅和排版点

在 CSS 支持的几种绝对长度单位中，最常见、最基础的是像素（px）。不常用的绝对单位包括 mm（毫米）、cm（厘米）、Q（quarter-millimeter，¼ 毫米）、in.（英寸）、pt（point，磅，印刷术语，大小为 1/72 英寸）、pc（pica，排版点，印刷术语，大小为 12 磅）。这些单位都可以通过公式相互换算：1in. = 25.4mm = 101.6Q = 2.54cm = 6pc = 72pt = 96px。因此，16px 等同于 12pt（16 / 96 × 72）。印刷设计师经常用磅作单位，而开发人员则更习惯用像素，因此在与设计师交流时需要做一些单位换算。

像素是一个略带误导性的名称，它并不严格等同于显示器上的像素。这在高分辨率显示屏（例如 “retina” 视网膜屏）上尤为明显。尽管 CSS 的测量结果会根据浏览器、操作系统和硬件的情况进行适当缩放，但通常情况下，96px 大概相当于屏幕上 1 物理英寸大小；然而这种换算关系在某些设备或者用户设置的分辨率设置下也可能会有所不同。

由于用户设备和屏幕尺寸的种类繁多，我们必须时刻注意 响应式设计（responsive design）。假如给一个元素设置 800px 的宽度，它在小窗口下会是什么样？如果水平菜单在一行显示上又会是什么样？在写 CSS 的时候，需要同时兼顾特殊性和普遍性。当一个特定问题有多种解决方案时，应该优先考虑在多种不同情况下更通用的解决方案。

定义

响应式设计 是由 Ethan Marcotte 创造的一个术语，指的是页面样式需要基于不同的浏览器窗口尺寸作出不同的“响应”。这就意味着要有意识地将任意尺寸的移动设备、平板电脑或桌面屏幕纳入考虑范围之内。本书第 8 章会详细介绍响应式设计，但本章会先普及一些重要的基础知识。

相对单位就是 CSS 用来处理这一抽象问题的工具之一。我们可以基于窗口大小来等比例地缩放字号，而不是设为固定值 14px；也可以将网页上的所有元素尺寸都相对于基础字号进行统一设置，这样只用改动一行代码，整个页面就能同步缩放。让我们看看 CSS 是如何实现这些功能的。

（本小节完）