作者：在使用 CSS 为网站设置样式时，你可能已经意识到屏幕上的英寸并非实际的英寸，像素也不一定就是实际的像素。你有没有想过如何在 CSS 像素中表示光速？在这篇文章中，我们将探索 CSS 长度单位的定义，从理解一些同名物理单位开始，借鉴 C.G.P. Grey[1] 的风格。
工业英寸 (in)
习惯使用英寸作为常用单位的人们已经熟悉这个物理单位了。对于我们这些生活在使用 公制 的地方的人来说，自 1933 年以来，“工业英寸”被定义为 2.54 厘米或 0.0254 米的数学等价物。
设备像素
电脑屏幕以像素显示内容。显示器上单个的物理“光点”，能够独立于其邻居显示全色，被称为 像素（图像元素）。在这篇文章中，我们将屏幕上的物理像素称为“设备像素”（不要与稍后将要解释的CSS 像素混淆）。
显示像素密度、每英寸点数 (DPI) 或每英寸像素数 (PPI)
特定设备上设备像素的物理尺寸可以从设备制造商提供的显示 像素密度 中推导出来，通常以每英寸点数 (DPI) 或每英寸像素数 (PPI) 为单位。当这两个单位指的是屏幕显示时，它们基本上指的是同一件事，其中 DPI 是常用的但不正确的单位，而 PPI 则更准确，但没人关心。设备像素的物理尺寸只是其 DPI 的倒数。
我目前使用的 MacBook Air (2011) 配备了 125 DPI 显示屏，因此
(一个设备像素的宽度或高度) = 1/125 英寸 = 0.008 英寸 = 0.02032 厘米
显然，这个数字太小了，无法在规格说明书上打印，所以 DPI 保持不变。
CSS 像素 (px)
CSS 像素的尺寸可以大致理解为肉眼舒适可见的大小，既不太小以至于需要眯着眼睛看，也不至于大到可以看到像素化。无需咨询眼科医生来定义“舒适可见”，W3C CSS 规范 为我们提供了一个参考建议
参考像素是指像素密度为 96 DPI 的设备上，像素在与阅读者手臂长度距离处的视角。
CSS 像素的正确尺寸实际上取决于你与显示器之间的距离。除了 Google Glass（它安装在你的头上）之外，人们通常会根据自己的视力，为特定设备找到自己独特的舒适距离。鉴于我们无法判断用户是否有视力障碍，我们关心的只是给定设备外形尺寸的典型观看距离——例如，手机通常握得更近，而笔记本电脑通常放在桌子上或腿上。因此，手机的“观看距离”比笔记本电脑或台式电脑的短。
观看距离
如前所述，观看距离因人而异，也因设备而异，这就是我们必须将设备分类为不同外形尺寸的原因。推荐的参考观看距离（“手臂长度”）和参考像素密度（“96 DPI”）实际上是历史性的；它是人们在 20 世纪后期通常访问网页的方式的证明
第一台运行 Web 的电脑。来自 维基百科：万维网。
对于 21 世纪的日常设备，我们有不同的参考建议
|
基准像素密度 |
一个 CSS 像素的宽度/高度 |
观看距离 |
|
|---|---|---|---|
|
20 世纪配备 CRT 显示器的 PC |
96 DPI |
~0.2646 毫米 (1/96 英寸) |
28 英寸 (71.12 厘米) |
|
配备 LCD 的现代笔记本电脑[2] |
125 DPI |
0.2032 毫米 (1/125 英寸) |
21.5 英寸 (54.61 厘米) |
|
智能手机/平板电脑[3] |
160 DPI |
~0.159 毫米 (1/160 英寸) |
16.8 英寸 (42.672 厘米) |
从这个表格中，很容易看出，随着像素密度的增加和 CSS 像素尺寸的减小，像你我这样的 麻瓜 通常需要将设备拿得更近才能舒适地看到设备屏幕上的内容。
因此，我们在 CSS 世界中确立了一个基本事实：**CSS 像素将在不同的物理尺寸下显示，但它始终会以查看者感到舒适的正确尺寸显示。**利用这一原理，我们可以安全地将基本尺寸（例如基本字体大小）设置为固定的像素大小，而与设备外形尺寸无关。
CSS 英寸 (in)
在电脑屏幕上，CSS 英寸与物理英寸无关。相反，它被重新定义为正好等于 96 个 CSS 像素。这导致了一个尴尬的情况，即你永远无法使用基本的 CSS 单位在屏幕上可靠地绘制精确的标尺[4]。但这正是我们想要的：使用 CSS 单位设置大小的元素将始终跨设备以用户感到舒适的方式显示。
顺便说一句，如果用户将页面打印到纸上，浏览器会将 CSS 英寸映射到物理英寸。你可以使用 CSS 可靠地绘制精确的标尺并打印出来。（确保在打印机设置中关闭“缩放以适应”！）
设备像素比 (DPPX)
随着我们步入未来（我的飞行汽车在哪里？），如今许多智能手机都配备了高密度显示屏。为了确保 CSS 像素在访问 Web 的每台设备上（即任何带有屏幕和网络连接的设备）都保持一致的大小，设备制造商必须将多个设备像素映射到一个 CSS 像素，以弥补其相对较大的物理尺寸。CSS 像素相对于设备像素的尺寸之比就是设备像素比 (DPPX)。
以 iPhone 4 为最著名的例子。它配备了 326 DPI 显示屏。根据我们上面的表格，作为智能手机，其典型观看距离为 16.8 英寸，基准像素密度为 160 DPI。为了创建 1 个 CSS 像素，苹果选择将设备像素比设置为 2，这使得 iOS Safari 以与在 163 DPI 手机上相同的方式显示网页。
在我们继续之前，回头看看上面的数字。我们实际上可以通过不将设备像素比设置为 2，而是设置为 326/160 = 2.0375，并使 CSS 像素与参考尺寸完全相同来做得更好。不幸的是，这样的比例会导致一个意外的后果：由于每个 CSS 像素并非由完整的设备像素显示，因此浏览器必须做出一些努力来对所有位图图像、边框等进行抗锯齿处理，因为它们几乎总是定义为完整的 CSS 像素。浏览器很难利用 2.0375 个设备像素来绘制 1 个 CSS 像素宽的边框：如果比例简单地为 2，则更容易做到。
顺便说一句，163 DPI 恰好是上一代 iPhone 的像素密度，因此 Web 将以相同的方式工作，而无需开发人员对其网站进行任何特殊的“升级”。
设备制造商通常选择 1.5 或 2 或其他整数作为 DPPX 值。偶尔，一些设备决定不按常理出牌，并配备了 类似 1.325 的 DPPX；作为 Web 开发人员，我们可能应该忽略这些设备。
Firefox OS 最初是一个手机操作系统，它 以这种方式实现了 DPPX 计算。实际的 DPPX 将由每台出货设备的制造商确定。
CSS 点 (pt)
点 是印刷行业中常用的单位，作为金属排版单位。随着世界逐渐从 凸版印刷 转向 桌面出版，“PostScript 点”被重新定义为 1/72 英寸。CSS 遵循相同的约定，将 1 个 CSS 点映射到 1/72 个 CSS 英寸，以及 96/72 个 CSS 像素。
你可以很容易地看到，就像 CSS 英寸一样，在设备显示器上，CSS 点与传统单位几乎没有关系。只有当我们实际打印网页时，它的尺寸才会与其桌面出版对应物匹配。
CSS 磅 (pc)、CSS 厘米 (cm)、CSS 毫米 (mm)
就像 CSS 英寸一样，虽然它们之间的相对关系保持不变，但它们在屏幕上的基本尺寸已被 CSS 像素重新定义，而不是 标准 SI 单位（米），后者由 光速 定义，光速是一个普遍常数。
我们实际上可以重新定义 CSS 中的光速；它是每秒 1,133,073,857,007.87 个 CSS 像素[5] — 从我们的角度来看，在 CSS 中的相对论使光在比传统 PC 外形尺寸更小的设备上传播速度略慢，从现实世界中观察屏幕。
视口元标记
虽然智能手机方便地放在你的手掌中，并且可以保证 CSS 像素会以用户舒适的大小显示，但只能显示固定宽度桌面网站一部分的设备不会非常有用。如果手机违反了 CSS 单位规则并假装成其他东西，那也同样没用。
引入 视口元标记 为移动设备带来了两全其美的方案，它将页面缩放的控制权交给了用户和 Web 开发人员。你可以设计一个移动布局，并选择退出视口缩放，或者，你可以保留为桌面浏览器设计的网站，并让移动浏览器为你和用户缩小页面。与往常一样，可以在 Mozilla 开发者网络 上找到详细的描述和用法。
结论
浏览器供应商虽然存在竞争关系，但认识到维护 Web 平台稳定性的努力，并通过一个标准组织协调其功能集。在宣布功能和 API 的适用性作为标准之前，会仔细测试其在所有场景中的实用性。CSS 像素的定义就是其中之一 从一开始就存在。引入的新功能必须保持向后兼容性，而不是改变旧的行为[6]，因此许多功能（设备像素、视口元标记等）都被引入作为额外的复杂层。使用标准化功能的旧网页因此具有内置的“向前兼容性”。
考虑到这一点，Mozilla 与我们的合作伙伴一起培育和捍卫开放 Web——我们都珍视的独特平台。
[1] 好吧，实际上不是，因为我们不会为此制作视频。如果 C.G.P. Grey 真的制作了关于这个主题的视频，我不会介意的！
[4] 只有一个例外：非标准的CSS 单位 mozmm 可以实现这一点，前提是 Firefox 知道其运行的像素密度。这超出了我们主题的范围。
[5] 每秒 299,792,458 米 ÷ 每英寸 0.0254 米 x 每英寸 96 像素
[6] 曾经有一段时间，人们试图提出一种完全打破向后兼容性的新标准（*咳嗽* XHTML *咳嗽*），但那是另一个故事了。
关于 Tim Chien
Timothy Guan-tin Chien，又名“timdream”，是一位工程经理和前端 Web 开发人员，致力于 Firefox OS 的移动 UI “Gaia”。他喜欢编写代码、发表演讲，并尝试定期在blog.timc.idv.tw上发布博客。
关于 Robert Nyman [荣誉编辑]
Mozilla Hacks 的技术布道师和编辑。发表关于 HTML5、JavaScript 和开放 Web 的演讲和博客。Robert 是 HTML5 和开放 Web 的坚定支持者，自 1999 年以来一直从事 Web 前端开发工作——在瑞典和纽约市。他还定期在http://robertnyman.com上发布博客，并且喜欢旅行和结识新朋友。
26 条评论