CSS 单位

我觉得我应该再尝试一下，向人们解释 CSS 单位。

在这个博客（和 Slashdot）的回复中，有些人反对高 DPI 提案，说：“像素就是像素！让 CSS 像素不等于屏幕像素是个坏主意！” 那些这样想的人对万维网即使在今天的工作方式也存在根本性的误解。CSS 像素不一定等于设备像素，这已经是事实，这样做没有任何问题。它不会搞砸你的网站。如果你不想，你甚至不必考虑它。

例如，当你使用支持缩放的浏览器（如 Opera）进行缩放时，CSS 像素将不等于屏幕像素。也不应该等于，否则缩放就不可能了。如果做得好，缩放不会损害你的网站或以任何方式扰乱其布局，因为所有内容都会一起缩放。我之前概述的高 DPI 提案旨在定义网站如何在缩放时智能地显示更高水平的细节，而不是仅仅放大完全相同的内容。

高 DPI 已经发挥作用的另一个例子是打印机。打印机可以有非常高的 DPI，如果你让 CSS 像素等于设备像素，那么你的网站打印出来会非常小，你甚至无法阅读。像素缩放已经在打印层面完成。

除了对 px 单位感到困惑外，有些人还对所谓的绝对单位感到困惑。这些包括 pt 或 cm 等单位。这些单位实际上不是绝对的。绝对单位是一个神话。

可悲的事实是，设计师从未真正理解 pt 和 px 之间的区别。即使在今天，许多网站也在同一个网页中混合使用这些单位。他们不仅假设 pt 和 px 的大小相近，而且还混用这些单位，假设这两个单位之间的比率在所有浏览器和设备上都将保持不变。任何真正尝试将 pt 视为物理英寸的 1/72 的浏览器，最终只会导致网站渲染出错。

这就是为什么浏览器在决定所有绝对单位如何与 CSS 像素相关联时，会使用96 dpi 规则。在评估 pt 等绝对单位的大小时，浏览器简单地假设设备以每英寸 96 个 CSS 像素运行。这意味着 pt 最终会变成 1.33 个 CSS 像素，因为 96/72 = 1.33。你实际上不能使用设备的物理 DPI，因为它可能导致网站显示严重错误。

其他值得讨论的单位是 em 和 ex。这些单位主要因网页浏览器的文本缩放功能而有趣。由于一些浏览器（如 Safari 和 Firefox）只缩放文本而不缩放其他内容，因此将所有内容用这些单位表示可以让你让文本以外的内容也随字体大小缩放。