什么是 CSS 中的像素 (px)（在视网膜显示时）？

Question

在视网膜显示时，CSS 中的像素是什么？

关于 px 的问题已经回答过了。答案似乎有点过时，并没有解决今天的问题。或者他们已经在现在得到了回答，但在更复杂的背景下。

所以对于 2019 年，一个简单的问题是：CSS 中的 px 是什么？

Answer 1

在视网膜显示时，CSS 中的像素是什么？

来自Retina 显示器的 CSS 技术：

CSS 像素是浏览器用来在网页上绘制图像和其他内容的抽象单元。CSS 像素是 DIP，这意味着它们是独立于设备的像素。它们根据呈现它们的屏幕的像素密度重新调整自己。

如果我们有以下一段代码：

<div style=”width:150px; height:200px”></div>

上面的 HTML 组件在标准显示器中的尺寸为 150 像素 x 200 像素，而在 Retina 显示器中为 300 像素 x 400 像素，以保持相同的物理尺寸。

CSS 中的 px 是什么？

根据理解像素和其他 CSS 单位，在高分辨率设备上，CSS 像素是 1/96 英寸。

CSS 像素是“参考”像素，而不是设备像素。这是一种误导，就我个人而言，我更喜欢 SVG 使用的“用户单位”的概念，因为我认为然后解释到物理单位和设备像素的映射更容易。但是一旦理解“px”实际上是一个参考，而不是一个设备像素，事情就更有意义了。需要记住的是，CSS px 是一个抽象单位，并且有一个比例控制它如何 a) 映射到实际设备像素和 b) 映射到物理单位（以固定方式，比例始终是 96 CSS px 到一个英寸）。

CSS 英寸正好或“接近”一英寸。在高分辨率设备上，如果没有其他参数干扰（如用户缩放或 CSS 变换），一英寸将是预期的物理英寸。在低分辨率设备上，会有一定的误差，如上所述。

可扩展性和适应性是最重要的。对于大多数开发人员来说，最重要的方面是内容布局可以以可预测和合理的方式随着单位规模的调整而重排和适应。虽然在所有设备上保持精确纵横比的概念看起来很有吸引力，但它在低分辨率设备上产生了不希望的后果（例如导致模糊渲染的不需要的抗锯齿）。