CSS - 测量单位和屏幕分辨率:什么是参考像素?

CSS - Units of measurement and screen resolution: what's reference pixel, anyway?

你好!我正在阅读有关测量单位 (https://www.w3.org/TR/css-values-3/#reference-pixel) 的 W3C 规范,事实是我不明白什么是 参考像素 。你们能给我解释一下吗,或者给我指出另一个更容易理解的参考或解释。另外我不确定我是否真的了解有关单位和度量的其他内容哈哈。真的,这似乎太难了。 谢谢!

参考像素试图标准化 Web 开发中 "pixel" 的含义。这很重要的原因是像素的物理测量值可能会因显示器的像素深度而有很大差异。

例如,旧的 CRT 显示器每英寸有 72 个像素,而 iPhone 7+ 每英寸有 401 个像素。因此,100px 的字面测量值在 CRT 显示器上为 1.39 英寸,在 iPhone.

上为 0.25 英寸

这篇文章也有很好的解释,帮助我更好地理解它。

A List Apart, "A Pixel Identity Crisis" by Scott Kellum. January 17, 2012

"The w3c currently defines the reference pixel as the standard for all pixel-based measurements. Now, instead of every pixel-based measurement being based on a hardware pixel it is based on an optical reference unit that might be twice the size of a hardware pixel. This new pixel should look exactly the same in all viewing situations..."

"When using a phone that you held close, a reference pixel will be smaller on the screen than a projection you view from a distance. If the viewer holds their phone up so it is side-by-side with the projection, the pixel sizes should look identical no matter the resolution or pixel density the devices have. When implemented properly, this new standard will provide unprecedented stability across all designs on all platforms no matter the pixel density or viewing distance."