CSS像素大小是如何计算的？

CSS像素的大小是根据设备上的视觉角度和像素密度来计算的。根据规范，CSS设备的尺寸可以通过将物理单位与其物理测量相关联，或者通过将像素单位与参考像素相关联来确定。对于打印媒体和类似的高分辨率设备，锚定单位应该是标准物理单位（英寸、厘米等）。对于低分辨率设备和具有不同的观看距离的设备，推荐使用像素单位作为锚定单位。对于这样的设备，像素单位应该是最接近参考像素的设备像素的整数。

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

根据上述引用，我得出以下结论：

1. 单位px是绝对的，根据等式1px = 1/96in定义。对于像素密度为96ppi的屏幕，1px的长度对应于从28英寸距离观看屏幕时设备像素的实际边长。

2. 对于其他设备，制造商根据像素密度ppi选择一个最佳距离d。制造商如何找到最佳距离是他的商业秘密。

3. 然后，参考像素由y给出。根据截距定理，有y = d /（28 * 96）。

4. 现在，y必须由设备像素的整数ndevpix最佳逼近。ndevpx的值取决于屏幕的ppi，计算公式为ndevpx = Int（y * ppi）= Int（（d * ppi）/（28 * 96）），其中Int（x）是数字x的最佳整数逼近值。

5. 例如，iPhone SE的ppi为326，d为16.8，ndevpx = Int（2.03）。因此，苹果选择了2个设备像素作为1px。

参考来源：developer.mozilla.org/en-US/docs/Glossary/CSS_pixel：CSS像素这个术语与CSS绝对长度单位px是同义的，它的正式定义是恰好等于1个CSS英寸（in）的1/96。

过去：

1个CSS像素=96 DPI英寸显示器上的1个像素

（在旧的Windows显示器上很常见）

现在：

1个CSS像素=新的DPI显示器上的(???)个像素

（智能手机、新型显示器、电视等）

今天，对于“像素”有两种不同的解释，过去和现在。这就是混淆的根源。但是，“CSS像素”一直是CSS像素。只是最近将其更名为“参考像素”，以帮助将CSS像素的重新计算转化为新型高清显示器上的“设备像素”。在2011年之前，旧的CSS像素与屏幕和打印机上的物理单位密切相关。至少，W3C的建议要求厂商遵循该规范。直到iPhone的发明和后来的高清设备屏幕出现之前，“1个CSS像素=屏幕上的1/96英寸”这种解释才失败并被放弃。

解决方法是允许具有高清屏幕的制造商按照他们喜欢的方式“重新解释”“CSS像素”或“参考像素”为他们控制的新“设备像素”。因此，现在，在屏幕上应该有多少个CSS像素适合给定的物理尺寸以及对新型数字设备上的观看者的影响已经发生了变化。新的“设备像素”试图遵循1个CSS像素=1/96英寸（通过更小的屏幕的用户观看距离进行修改）的规则不再适用，因为屏幕的PPI深度或“像素密度”已经增加，观看者的眼球与屏幕的距离同时变小（手机屏幕）或变大（电视屏幕），并且现在是变量的。这打破了我们在2000年左右所习惯的旧定义。

在今天的大多数新型高清屏幕上，CSS像素现在根据设备的大小和PPI重新创建为多个设备像素。如果不这样做，在旧的Windows监视器上，72 DPI图像会在现代iPhone屏幕上显得很小。但是你会注意到，现在每个手机和屏幕都有自己的像素密度（PPI或DPI）、屏幕分辨率（像素宽度x高度）、自己的物理视口尺寸（英寸）、自己的默认缩放和字体调整系统、自己的布局规则（横向、纵向等），因此它们对于如何重新解释CSS像素为设备像素（2、3、4等）有自己的规则。你问有什么公式？我说没有公式。在我看来，该行业没有遵循任何已知的标准，自2010年以后就没有了。

以下是一些可能有助于了解背景的历史...

CSS像素的历史

多年前，在Web开发的黄金时代（2010年之前），在级联样式表（CSS）中定义一个“英寸”（in）与屏幕或打印上的一英寸正确相关联，始终给用户提供相同的视觉体验，这就是为什么和如何发明了96像素每英寸的标准。它旨在强迫制造商给用户以全能的数字或CSS像素提供相同的视觉体验。

从1990年代开始，这些CSS标准落在计算机操作系统制造商和他们的显示器上。在2011年之前，在旧的Windows和Mac屏幕上正确映射了96 DPI。你会看到Mac和Windows计算机屏幕正确地将正确的像素每英寸放在屏幕上，以便CSS“像素”始终可以一致地适应其中，而不考虑制造商、供应商、屏幕或设备。由于它们略有不同的屏幕尺寸和像素密度，Mac和Windows之间的网站显示存在视觉差异。但是这是基于他们认为视觉对于他们的观众来说应该有多大或多小的观点。但这并没有改变整体的CSS标准。

2000年之后，浏览器中的“英寸”在大多数屏幕上看起来接近一英寸，并且对于大多数观众来说都是如此。当然，你可以增加分辨率，或者在屏幕中塞入更多的像素。但是这并没有改变96像素每英寸的规则，因为它基于这样一个自然的假设：用户可能会选择更大或更小的文本或DPI。这与当时的缩放相同。但是在2000年之后，CSS像素和数百万个支持的网站完美地适合于数百万台台式机屏幕、设备和印刷页面。

在2007年之前，大多数屏幕将每个网页和CSS像素转换为“每英寸”的预期。因此，作为开发人员，我们最初开始尝试使用基于像素的布局和我们最喜欢的字体大小选择，使用标准的96 dpi和Windows监视器以及72 dpi的Mac屏幕来进行严格的物理布局。当然，2001年之后，显示器开始变得更大，分辨率设置更高。但是每个人都知道一英寸仍然是一英寸，一个像素仍然是一个像素。我们可以根据96 DPI的标准设计网站布局，以适应其增长。

Mac使用72 DPI，我们总是知道Mac用户会看到一些不同的东西。作为一个2000年的网站开发人员，我记得使用这个系统，它效果很好。但是在测试Mac和Windows时，我记得看到了一个奇怪的现象...网站在Mac屏幕上看起来稍微大一些。因为72 dpi是最低的公共分母，所以我们将其用于一切，默认分辨率，包括图像尺寸、像素单位的网页布局等。这就是为什么现在网上有这么多72 dpi的图像。但是在2000年之后的十多年里，这一方法效果很好。CSS像素按预期工作！

iPhone的出现

在2007年发明iPhone之后，96 DPI像素的概念开始改变。为什么？小屏幕的分辨率或每英寸像素数（PPI）大幅增加。这意味着在例如200 PPI的高密度iPhone小屏幕设备上，一个普通的网站看起来会很小，压缩，文本无法阅读，图像尺寸不到预期的一半，如Windows的96 DPI监视器上所见。

但这正是CSS像素应该的工作方式。CSS通过“手持”媒体查询来解决这些小屏幕、高分辨率的问题。

我记得使用CSS“手持”构建网站，调整布局中的像素，甚至为iPhone显示更高分辨率的图像。这起初效果很好，除了一个简单的事实...这些新的屏幕和设备拒绝采用CSS标准！为什么？他们希望数百万个网站在不需要特殊的CSS适应之前就能够出色地呈现。在我看来，这是一个失败，但只能这样了。

所以...到2011年，W3C意识到他们伟大的标准永远不会在这些新的厂商设备上一致地显示，他们想要快速获利，而不是遵循标准。所以他们将定义翻转为从96 DPI开始作为“参考”像素，然后允许厂商继续创建更高分辨率的屏幕，但然后“重新解释”CSS像素为他们控制的“设备像素”。

2011年之后，W3C不再期望常见的显示器、屏幕和设备正确定义CSS中的绝对尺寸单位（cm、mm、in等）在屏幕上应该看起来如何。这是因为制造高清屏幕的厂商开始增加分辨率，使得网站变得越来越小，直到CSS标准崩溃。这就是“设备像素”的概念诞生的时候，设备通过将多个像素塞入其中来重新生成你的CSS像素。

这是什么意思？这意味着每个设备都会自动重新生成你的网站设计及其参考CSS像素的新像素大小。换句话说，你的网站默认情况下会在这些小屏幕上变得更大、更易读。你的1个像素可能会被重新映射为2个像素。平均的“设备像素”范围现在是2-4。苹果iPhone的用户对于他们选择如何翻译CSS像素没有选择余地，如果他们没有适应新的设备像素解释，我们所有人都将在400+ dpi视网膜显示器和4k显示器上看到非常小的72 dpi的GIF图像。数百万台新型现代设备上的网站将无法阅读。

你无法控制这一点。你所能做的就是避免严格的基于像素的布局和PPI/DPI图像，专注于网页布局的灵活性。这就是为什么我在2022年避免使用像素，尽量使用基于文本的单位布局，根据用户的字体大小和使用绝对字体大小单位布局和rem/em单位而不是像素。现在，我的网站可以根据需要自然地拉伸以填充屏幕、手机、显示器或电视的设置，根据用户设置的字体和文本的自然大小。

但这就是“设备像素”的诞生方式和原因，以及为什么像素现在很难控制。在大多数情况下，设备像素只是简单地将网站像素的两倍或三倍。它试图计算出多少个网站设计的CSS像素被塞入他们物理高清显示器的一英寸中。

现在的年轻人在建设网站时只会认为它一直都是这样的。他们毫无头绪。这就是为什么大多数有经验的现代网站开发人员现在使用相对字体大小，并避免像素作为任何单位。通过这样做，你的布局现在可以根据所需的百分比来拉伸以填充屏幕和当今使用的奇怪视口，适应用户较大或较小的字体大小，使用用户的缩放设置，或者只是使用设备默认的设备像素设置。我们不再被精确的基于像素的布局所束缚，正因为这一混乱。网站上的页面可以自动拉伸以填充其中的内容。但是许多年轻人开发网站仍然坚持将“CSS像素”视为上帝。伙计们，它已经过时了。

我认为这就是我们为什么会在这里以及为什么新的屏幕技术摧毁了曾经非常简单而优雅的网站技术的方式。今天是一团糟！为什么？因为厂商讨厌标准。他们从来没有能够作为一个技术行业团结起来定义它。在采用其中任何一个方面都没有利润。因此，随着未来50年出现更多新设备，这个网站像素转换问题将变得更加严重。到那时，CSS可能会采用一种“黑科技”，允许我们控制像素的显示方式。实际上，在CSS3中，你已经可以探测分辨率，根据物理视口大小、移动设备、设备像素设置、缩放、媒体查询等设置尺寸等。

但是这些新的想法并不能解决问题。它们只是增加了更多的复杂性和混乱，而不是迫使所有屏幕和设备制造商使用相同的简单CSS像素，这应该是过去和现在所有屏幕的通用单位。

CSS像素大小是如何计算的？

CSS像素的大小是通过设备像素比（device pixel ratio）来计算的。设备像素比是指设备上物理像素和CSS像素之间的比率。通过将设备上的物理像素映射到CSS像素，可以确定CSS像素的大小。设备像素比是由设备制造商决定的，通常以一个整数值表示。例如，iPhone 4的设备像素比为2，意味着将2个设备像素映射到一个CSS像素。

为了计算CSS像素的大小，需要知道设备的物理像素密度（PPI）和CSS像素密度（cssppi）。物理像素密度是指每英寸的物理像素数，而CSS像素密度是指每英寸的CSS像素数。根据设备的物理像素密度和设备像素比，可以计算出CSS像素的大小。具体的计算公式如下：

x = 设备像素比

y = 物理像素密度 / x

其中，x是第二个设备像素密度和第一个设备像素密度之间的比率，y是第二个设备像素密度对应的CSS像素大小。

需要注意的是，CSS像素的大小并不是一个固定的长度，而是取决于设备的类型和使用方式。不同的设备和使用方式可能会有不同的CSS像素大小。

如果想要了解更多关于CSS像素大小计算的信息和参考资料，可以参考以下文章：

- A List Apart - A Pixel Identity Crisis

- Pixels Per Inch Awareness and CSS Px

- Physical Size of CSS Units On Smartphones, Tablets & Co