CSS像素真的是绝对单位吗？也就是说，1英寸=96个像素是正确的吗？

Question

官方的 W3C文档 表示：

1 像素 = 1/96 英寸

在我的以前的18.5英寸屏幕上，screen.width 是 1367 px，屏幕宽度为 14 英寸。通过 W3C 的公式：

14 * 96 px = 1344 px

W3C 公式偏差为每英寸 20/14 px。由于偏差太低，并且我的屏幕上 1 英寸 是 97.4 px，因此我接受了 W3C 公式，并相信 CSS 像素是一个 绝对单位，这意味着它始终等于 0.75 pt（物理单位）。

本周我购买了一台21.5英寸的全高清屏幕，宽度为19英寸，`screen.width` 是 `1920 px`。所以现在我的屏幕上 `1 英寸` 是：

``` 1920/19 ~ 101 px ```

不仅如此，我的朋友的屏幕是24英寸，并且具有相同的 1920 x 1080 分辨率。24英寸和21.5英寸都不能对应相同的 CSS 像素数量。

因此，现在在我的屏幕上，CSS 像素不是绝对的测量单位。而且我的屏幕上所有东西都相对较小。即使如此，现在我的字体大小也会让我产生错觉。当我发现在我的屏幕上最小可读字体大小为16px时，实际上在较小的屏幕上它更大。因为在我的屏幕上，`16 px` 在厘米上与前一个较小屏幕上的 `14px` 物理上相同。我正在错误地设计我的网站，我不再是一个好的前端开发者。

所以问题是：

- CSS 像素真的是绝对的测量单位吗？也就是说，`1 英寸 = 96 px` 是真的吗？

- user31782

---

除非你在某个地方搞砸了，否则听起来好像不是。 :) - user5306470

Answer 1

根据您已经链接的CSS值和单位模块，稍微往下指定了两种可以应用于CSS的不同实现方法：

对于CSS设备，这些尺寸可以通过以下两种方式来锚定:

i. 将物理单位与其物理测量相关联，或
ii. 将像素单位与参考像素相关联。

接下来指出：

如果锚定单位是像素单位，则物理单位可能与其物理测量不匹配。或者，如果锚定单位是物理单位，则像素单位可能无法映射到设备像素的整数倍。

最后，它总结道：

参考像素是在像素密度为96dpi且距读者一臂之遥的设备上一个像素的视觉角度。对于名义臂长为28英寸的阅读，因此视觉角大约为0.0213度。对于臂长处于一臂之遥的阅读而言，因此1px相当于约0.26毫米（1/96英寸）。

这意味着像素单位 是 绝对长度，但其长度可能会根据设备应用实现方法 i 或实现方法 ii 而有所变化。

CSS值和单位模块定义的绝对长度仅仅是"锚定到某些物理测量的长度"。物理测量将是它们的实际物理长度或由参考像素派生的长度。

同一规范的同一部分还指出：

对于印刷媒体和类似的高分辨率设备，锚定单位应该是标准物理单位之一（英寸、厘米等）。对于低分辨率设备和视距不同的设备，建议将锚定单位设置为像素单位。对于这样的设备，建议像素单位指的是最能近似参考像素的整个设备像素数。

96px 并不总是等于1英寸。

- James Donnelly

---

事情似乎变得更加复杂了。如果我设置 width: 1cm，开发者工具会显示计算出的宽度为 62px。现在我认为 width: 2cm 应该是精确的两倍，但实际上它却是 99px。与实际比例进行比较也表明，2cm 不是 1cm 的两倍。所以我认为 ii 已经被实现了，但如果真是这样的话，那么 1px 应该是 1/96 英寸，但实际上并不是这样的。 - user31782

其次，我假设如果实现了_ii_，1inch就是96个参考像素。但是如果我的屏幕dpi超过了96呢？比如说我有一个200dpi的屏幕，那么1个参考像素对应多少英寸呢？ - user31782

最后，我认为屏幕没有实现_i_和_ii_。屏幕只是尝试匹配标准的CSS像素宽度，例如大型桌面电脑将是1920px，中型桌面电脑将是1366px，笔记本电脑将在1280左右（可能MacBook是1440px）。旧的CRT显示器是800px。这更明显的是，在Windows 10中，我可以在1920、1680、1600、1440、1400、1366、1360、1280、1152、1024和800之间进行选择。其中1280具有不同高宽比的不同高度选项。 - user31782

Answer 2

CSS像素单位不一定是物理像素测量（在我的回答中，我正在讨论屏幕而不是打印的CSS像素）。

对于CSS设备，这些尺寸可以通过将物理单位与其物理测量相关联（i），或者通过将像素单位与参考像素相关联（ii）来锚定。

在上述解释中，参考像素的解释如下：

参考像素是具有96dpi像素密度和读者距离为手臂长度的设备上一个像素的视觉角度。对于28英寸的标称手臂长度，因此视觉角度约为0.0213度。对于手臂长度阅读，1px相当于约0.26毫米（1/96英寸）。

更多解释请点击此处。

以一个简单的例子来说，我们拿一个iPhone 8。

Phy px 750 X 1334

CSS px 375 X 667

如您所见，物理像素测量单位与CSS像素完全不同。实际物理像素和CSS像素之间的比率称为像素比，这取决于观看角度、观看距离和显示分辨率。

最终，硬件供应商根据上述方面进行设置。

这里是设备列表的链接，其中包含物理像素、CSS像素及其像素比。

所有这些的目标是在不同的硬件上实现更一致的显示。

最后，来自w3.org的文档指出：

请注意，像素单位和物理单位的定义与CSS的早期版本不同。特别是，在CSS的早期版本中，像素单位和物理单位之间没有固定比例：物理单位总是与它们的物理测量相关联，而像素单位会变化以最接近参考像素。 （这种改变是因为太多的现有内容依赖于96dpi的假设，打破该假设会破坏内容。）

在早期版本中，Css像素主要基于参考像素，而参考像素则基于它始终是96dpi的假设。在这里，CSS像素和物理像素通过像素比相关联。

希望这有所帮助。

- Saa_keetin

Answer 3

不是的，px是一种相对单位。由于像素大小在不同的屏幕尺寸上有所不同，因此（可能是W3C）将px作为相对单位进行了标准化。

- Abhishek Zirota

---

"你所指的 px 是物理像素还是逻辑像素？能否提供一些参考资料来支持你的说法？" - user31782

如果你所说的 px 是指 css像素，那么你有没有任何参考或证明来支持“由于像素[css像素]大小在不同的屏幕尺寸上是不同的”这一说法？ - user31782

请查看此链接 https://www.w3.org/Style/Examples/007/units.en.html - Abhishek Zirota

在你的链接中有两个重要点。1. 因此，px不是定义为常量长度，而是取决于设备类型的东西 2. 实际上，CSS要求1px在所有打印输出中必须恰好为1/96英寸 我认为“打印输出”不包括屏幕。所以就这个参考而言，你的说法是正确的。但是该参考不是官方的CSS文档，所以我不能接受你的答案。此外，他们没有解释“px”与屏幕的“dpi”（每英寸像素数）有什么关系，也就是说我的屏幕上的“96px”（dpi 102）是多少英寸？ - user31782

@user31782，“打印输出”是一个棘手的短语，因为每台打印机都有自己的打印分辨率（DPI）。在300 DPI打印机上，100px / 100px的大小将比96 DPI打印机上的100px / 100px小。 - Narxx

一般来说，像素不能是绝对大小（以现实生活中的尺寸测量），因为显示器和打印机的分辨率差异。永远不要假设1000像素在显示器或打印上具有固定的实际宽度。 - Narxx