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

Question

在深入研究 CSS 单元时，我遇到了引用像素的定义。但是，我无法找到其与 CSS 像素单元关系的一致且全面的描述。我对这个问题做了一些研究，但对我来说仍然有点不清楚。

1。收集的信息

<小时/>

1.1 像素定义

像素有两种不同的类型/定义:

"Device pixel" — a single physical point on a display.

还有:

CSS pixel — a unit most closely matching the reference pixel. [1]

同名的两个平行概念绝对不能澄清困惑。 我完全理解引入第二个的目的，但我发现它的术语具有误导性。 CSS 像素被分类为绝对单位并且:

"Absolute length units are fixed in relation to each other." [1]

对于除像素之外的每个单位，上述陈述似乎都很明显。遵循 w3c 规范:

"For a CSS device, these dimensions are either anchored (i) by relating the physical units to their physical measurements, or (ii) by relating the pixel unit to the reference pixel.

(...) Note that if the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels." [1]

考虑到上述引用，我假设绝对单位并不那么绝对，因为它们可能锚定到引用像素。

<小时/>

1.2 引用像素

引用像素本身实际上是一个 Angular 测量[ 2 ]:

"The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees." [1]

下图所示内容:

尽管将引用像素定义为视角，但我们可以进一步阅读:

"For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch)."

撇开不一致不谈，我们能够确定 Angular 值:

α = 2 * arctan(0.026/142) = 0.02098°

where:
    α — a value of the visual angle

因此显示单位的大小等于:

y = 2x * tan(0.01049°)

where:
    y — a displayed unit size
    x — a reading distance

根据上述公式，为了计算单位大小，我们需要确定实际读取距离是多少。由于用户之间的情况可能有所不同，因此其分类是基于设备的 DPI。

1.2.1 DPI

为了方便起见，我们假设DPI == PPI。

此测量使我们能够猜测显示类型。 快速检查:

• iPhone 6(4.7"，1334×750):326 ppi；
• 索尼 Bravia 4K(54.6 英寸，3840×2160):75 ppi。

因此，一般来说，PPI 越大，用户坐的位置越靠近屏幕。下表[3 ] 为具有特定 DPI 的设备提供阅读距离建议:

               ———————————————————————————————————————
              |  DPI  | Pixel size | Reading distance |      
 —————————————————————————————————————————————————————
|PC's CRT     |  96   | ~0.2646 mm |     ~71 cm       |     
|display      |       |            |                  |
 —————————————————————————————————————————————————————
|Laptop's LCD |  125  | 0.2032 mm  |     ~55 cm       |
|display      |       |            |                  |
 —————————————————————————————————————————————————————
|Tablet       |  160  | ~0.159 mm  |     ~43 cm       |
 —————————————————————————————————————————————————————

但是，我不清楚这些距离值是如何获得的。与 DPI 的关系是用函数描述的还是只是经验观察？

1.2.2 设备像素比

视网膜显示屏的引入使问题变得更加复杂。它的 PPI 往往比非 Retina 显示屏大约 2 倍，而建议的阅读距离应保持不变。 由于CSS像素大小不一定与设备像素大小相对应，因此我假设Retina显示屏上的单位大小首先转换为引用像素大小(以设备像素表示)，然后相乘按像素比。正确吗？

1.2.3 缩放

放大时，显示的引用像素大小会增大[ 4 ]，因此距显示器的距离会增加。这是非常违反直觉的，因为这意味着我们正在“远离”屏幕，而不是靠近它。

<小时/>

2。问题

<小时/>

总结我的疑虑并阐明问题:

1. 当 anchor 单位是物理单位时，CSS 像素大小是如何计算的？
2. 如何建立DPI与读取距离之间的关系公式？
3. 如何计算打印机和 Retina 显示器等非标准高 DPI/PPI 设备的 CSS 像素大小？

另外，如果我的推理无效或者遗漏了什么，请纠正我。感谢您的回复。

<小时/>

3。引用文献

<小时/>

1. W3C 规范
2. inamid.com，肖恩·B·帕尔默 (Sean B. Palmer) 的网站
3. Mozzilla 黑客
4. 1uirksmode.org

Answer 1

我可能是错的，但我认为 CSS 像素不可能将物理单位作为 anchor 。

基于this文章:

The px unit is the magic unit of CSS. It is not related to the current font and also not related to the absolute units. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like a book? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use.

更新:我错了。 It is possible只是目前还没有在任何浏览器中实现。如果情况确实如此，根据规范:“这些尺寸要么通过将物理单位与其物理测量值相关联来锚定”，这意味着 1px 将等于 1/96物理英寸。

表中 DPI 与读取距离的关系是，如果 DPI = 96，则读取距离约为 71 厘米或 28 英寸，这些值成反比，即较高的 DPI 会导致读取距离更小。

由此很容易得出一个公式:

x = 125/96

y = 71/x

where:
  x - ratio between second and first DPI value
  y - reading distance for second DPI value

对于更高分辨率的设备，Mozilla Hacks 文章下面给出了一个示例:

Let’s take iPhone 4 as the most famous example. It comes with a 326 DPI display. According to our table above, as a smartphone, it’s typical viewing distance is 16.8 inches and it’s baseline pixel density is 160 DPI. To create one CSS pixel, Apple chose to set the device pixel ratio to 2, which effectively makes iOS Safari display web pages in the same way as it would on a 163 DPI phone.

这意味着我们有两种分辨率 - 物理分辨率 (PPI) 和 CSS 分辨率 (cssppi)。看来cssppi用于计算引用像素大小，然后设备制造商选择将多少引用像素映射到一个CSS像素(我假设这个数字等于设备像素比率值，但不能100%确定)。

下表比较了一些常见设备的像素比、PPI 和 CSSPPI:http://mydevice.io/devices/

有关更多信息和引用，请查看以下文章:

• A List Apart - A Pixel Identity Crisis
• Pixels Per Inch Awareness and CSS Px
• Physical Size of CSS Units On Smartphones, Tablets & Co