px 的隐藏身份：角度浏览器的 px 和一个固定角度有关，角度投影到平面，平面的远近决定了 px 的大小。这样的规则让

px 是浏览器的一个尺寸单位，简单的两个字母无处不在，没有使用门槛。基本上我们知道它由多个物理真实像素组成，浏览器抹平了不同设备上的差异，我们也能通过 window.devicePixelRatio 了解真实像素与 px 之间的倍率。

借着上面的认知一路顺风，直到最近碰到了问题，我意识到了：就算敲打了一千次 px，我的心与 px 的距离也不会靠近 1 厘米。深入学习这个单位很重要。

我需要准确、有预期地了解不同设备显示屏展示网页的宽度，以此确定响应式的断点。显示屏的种类组合非常多，13 寸、16寸、23 寸、27 寸、1080p、1440p、2K、4K、5K，学习了 px，我们就能找到 px 展示宽度的规律，不怕迷失在无穷尽的尺寸、分辨率的组合中。

浏览器的 px 和一个固定角度有关，角度投影到平面，平面的远近决定了 px 的大小。显示屏的尺寸、分辨率虽然不同，但是它们有相同的使用距离，相同的距离会得到相同的投影大小，所以 px 期望在每块显示屏上有肉眼观感一致的图形。这样的规则让我们可以放心：同一个图像在 5K 和 1080p 的屏幕上看，肉眼观看的大小是基本一致的。

下面详细介绍浏览器中 px 的工作方式，px 是如何让图像在多样的屏幕上始终如一的。

该图像描绘了用户看着两个平面，一个距离用户28英寸（71厘米），第二个距离用户140英寸（3.5米）。一个不断扩大的圆锥体从用户的眼睛投影到每个平面上。当圆锥体撞击第一个平面时，投影像素的高度为0.26mm。当圆锥体撞击第二个平面时，投影像素的高度为1.4mm。

下面整理了 3 个名词，有利于后面内容的区分、理解：

用户像素，浏览器的 px，CSS 尺寸单位，文中 px 皆表示用户像素；
真实像素，屏幕的实际像素颗粒，设备像素；
参考像素，理想的像素大小，用于抹平屏幕之间的图像大小差异。

这 3 个像素的关系是：整数个真实像素组成 px，px 的大小要尽量接近参考像素。

屏幕中的图像不能用真实像素计算。假设有一个 500 像素的月球，如果用真实像素表示，月球在 27 英寸 1080p 屏幕中大概是 15.6cm，而在 27 英寸 5K 屏幕中大概只有 5.86cm，肉眼大小光感相差 2～3 倍。

为了让月球在每块屏幕上看起来一样，就要借助参考像素了解月球在屏幕上的理想大小，以理想大小给每块屏幕做基准进行缩放。W3C 规范里定义了参考像素，它是一个角度投影到平面的大小，这个角度指的是眼球距离屏幕 1 手臂的距离（28inch，71cm），在 96dpi 屏幕上 1 个真实像素的视角角度，即 0.0213°。

结合开头的图片，当眼球距离屏幕 71cm 时，参考像素是 0.26mm，当距离是 3.5m 时，参考像素是 1.3mm。对于桌面端显示屏，参考像素是眼球离屏幕一手臂距离（71cm）的 0.26mm。

0.26mm 是 96ppi 的 1 个实际像素大小，当分辨率是 192 ppi 时，0.26mm 对应了 4 个（2*2）实际像素。分辨率和 96ppi 的倍数的平方就是 1 个像素里世纪像素的数量，同时也是 1px 的大小。对于倍数不是整数的情况，例如适配 Mac 的显示器，一般有 27 英寸 5K 218ppi，倍数是 2.27，W3C 推荐的做法是取整数个像素匹配，即 2，这样也可以避免子像素问题。

For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

现在我们用 px 重新计算两块屏幕的月球大小：

27 英寸 1080p，81.59ppi，81.59/96=0.85，px 取整为 1，0.26mm/(0.85/1)*500=152.94mm
27 英寸 5K，218ppi，218/96=2.27，px 取整为 2，0.26mm/(2.27/2)*500=114.54mm
理想屏幕，96ppi，1，0.26*500=130mm

可以看到月球在 5K 屏上比理想略小，在 1080p 屏上略大，但基本一致，大小差距不再是用实际像素计算时的 2～3 倍了。

现在我们已经知道了 px 的大小和角度有关，由显示屏和眼球的距离决定。问题是该如何确定显示屏和眼球的距离？我没有找到关于确定距离的规范或资料，但是它确实是基于一些共识，也能够验证，计算 px 时距离由远到近是：台式机 > 笔记本 > 手机。下面是来自 MDN Hacks Blog 的一张表格：

	像素密度基线	CSS 1px 的宽/高	观看距离
A 20th century PC with CRT display	96 DPI	~0.2646 mm (1/96in)	28 in (71.12cm)
Modern laptop with LCD	125 DPI	0.2032 mm (1/125in)	21.5 in (54.61cm)
Smartphones/Tablets	160 DPI	~0.159mm (1/160 in)	16.8in (42.672cm)

文章补充道：CSS px 将以不同的物理尺寸显示，但它将始终以用户感到舒适的正确尺寸显示。

在 web.dev 的一篇文章中介绍了手机 devicePixelRatio 的计算（和参考像素计算过程一致），计算过程假设了手机的观看距离是比 28 英寸更短的 18 英寸，从这里也能看出这个距离没有直接的资料。

基本可以确定厂商或浏览器会基于设备的用途，来确定设备的使用距离，便于确定 1px 的大小。无论如何，桌面端显示屏的基准 96ppi 对应了 28 英寸的观看距离，这是可以确定、可以通过验证的。

知道了 px 的计算方法，再确定响应式设计的断点就明确了很多。理想情况，响应式断点由内容决定，和具体的设备无关，例如内容的竖屏布局、紧凑布局、宽松布局对应了不同的断点，而不是期望内容在移动端、平板和桌面端对应不同的内容。

但是了解屏幕的宽度有助于了解断点的大致范围，不至于设置一个无法到达的断点宽度，下面是一张表格，列出了不同尺寸、分辨率的宽度 px 计算值：

分辨率	真实像素	斜线	23吋 ppi	24吋 ppi	25吋 ppi	27吋 ppi	32吋 ppi	可能的 dpr	说明	宽度 px
540p / qHD	960×540	1101.45	47.889	45.894	44.058	40.794	34.420	1	一般不做桌屏	/
720p / HD	1280×720	1468.6048	63.852	61.192	58.744	54.393	45.894	1	一般不做桌屏	/
1080p / FHD	1920×1080	2202.907	95.779	91.788	88.116	81.589	68.841	1	常 23 吋	1920
2K	2048×1080	2315.3194	100.666	96.472	92.613	85.753	72.354	1	非 16/9	/
1440p / QHD	2560×1440	2937.2096	127.705	122.384	117.488	108.786	91.788	1	常 27, 32 吋	2560
2160p / UHD	3840×2160	4405.8143	191.557	183.576	176.233	163.178	137.682	1.5, 2	常 27 或电视	2560, 1920
5K	5120×2880	5874.419	255.410	244.767	234.977	218	183.576	2, 3	Apple 27 吋	2560, 1706
8K / 8K UHD	7680×4320	8811.6287	383.114	367.151	352.465	326.357	275.363	3, 4	电视	/

以上表 27 吋 5K 显示屏作为例子说明计算过程：ppi 为 sqrt(5120*5120+2880*2880)/27=218，则参考像素为 218/96=2.27，取整之后 1px 等于横向 2 颗像素，dpr 为 2，显示屏的宽度 px 值为 5120/2=2560。

从上表可以看到，显示屏的宽度一般有 1920px 和 2560px，且最大一般是 2560px，因此设置最大断点时，不会超过 2560px，一般也会小于 1920px。