CSS像素是一个绝对单位吗？也就是说，1英寸= 96px是真的吗？ [英] Is a CSS pixel really an absolute unit? That is, is 1 inch = 96px true?

问题描述

官方 W3C文档说：

1 px = 1/96 of 1

在我之前的18.5英寸屏幕中， screen.width 为 1367 px ，屏幕宽度英寸为 14英寸。通过W3C公式：

14 * 96 px = 1344 px

W3C公式偏离 20/14 px per inch 。由于偏差太低，我的屏幕上的 1英寸为 97.4 px 我接受W3C公式，并且相信CSS像素是绝对测量单位，这意味着它总是等于 0.75 pt （物理单位） 。

这个星期我买了一个21.5英寸的全高清屏幕，它的宽度 19英寸和 screen.width 是 1920 px 。所以现在我的屏幕上 1英寸是：

1920/19〜101 px

不仅如此，我朋友的屏幕是24英寸，相同的1920 x 1080分辨率。 24英寸和21.5英寸都不能对应相同数量的CSS像素。

现在，在我的屏幕上，CSS像素不是绝对测量单位。我的屏幕上的一切都相对较小。即使如此，现在我受到我的字体大小的迷惑。当我在我的屏幕上发现16像素为最小可读字体时，它在较小的屏幕上实际上更大。因为我屏幕上的 16 px 与我以前的较小屏幕上的 14px 的厘米几乎相同。我正在设计我的网站是错误的，我不再是一个好的前端开发人员。

所以问题：

• CSS像素是一个绝对单位吗？也就是说，1英寸= 96像素是真的？

解决方案

您已链接的部分 CSS值和单位模块，有两种不同的实现可以用于CSS：

对于CSS设备，这些尺寸是锚定的

i。通过将物理单位与他们的身体测量值相关联，或
ii。通过将像素单位与参考像素相关联。

这个要注意的是：

如果锚点单位是像素单位，物理单位可能与其物理测量值不匹配。或者，如果锚点单元是物理单元，那么像素单元可能不会映射到整个设备像素数。

最后，它得出结论：

参考像素是设备上一个像素的视角，像素密度为96dpi，距离手臂长度的阅读器有一段距离。对于28英寸的标称臂长，因此视角约为0.0213度。对于阅读而言， 1px对应于约0.26 mm（1/96英寸）。

这意味着像素单位是绝对长度，但其长度可以根据设备是否应用实现 i 或实现 ii 从我在这里引用的第一部分开始。

$ b

一个绝对长度，由CSS值和单位模块，仅仅是锚定到某种身体测量的长度。物理测量可以是它们的实际物理长度或由参考像素得出的长度。

特定区域的同一部分还表示：

对于平面媒体和类似的高分辨率设备，锚点应该是标准物理单位之一（英寸，厘米等）。对于分辨率较低的设备以及具有不寻常观看距离的设备，建议使用锚点单元作为像素单元。对于此类设备，建议像素单位指的是最接近参考像素的整个设备像素数。

96px 并不总是等于1实际英寸。

The official W3C documentation says:

1 px = 1/96th of 1 in

In my previous 18.5 inch screen, the screen.width was 1367 px and the screen width in inches was 14 inches. By the W3C formula:

14 * 96 px = 1344 px

The W3C formula deviated by 20/14 px per inch. Since the deviation is too low, and 1 inch on my screen was 97.4 px I accepted the W3C formula, and believed that a CSS pixel is an absolute unit of measure, meaning it is always equal to 0.75 pt (a physical unit).

This week I bought a 21.5 inch, full HD screen, which has width 19 inches and screen.width is 1920 px. So now 1 inch on my screen is:

1920/19 ~ 101 px

Not only this, my friend's screen is 24 inches, and has the same 1920 x 1080 resolution. Both 24 inches and 21.5 inches cannot correspond to same amount of CSS pixels.

So now, on my screen, CSS pixels is not an absolute unit of measurement. And everything is relatively smaller on my screen. Even that, now I get deluded by my font sizes. When I find 16 px as minimum readable font on my screen, it is actually larger on smaller screens. Because 16 px on my screen is physically the same in centimeters as 14px in centimeters on my previous smaller screen. I am designing my websites wrong and I am not a good front end developer anymore.

So the question:

• Is a CSS pixel really an absolute unit? That is, is 1 inch = 96 px true?

解决方案

As specified slightly further down the part of the CSS Values and Units Module you've already linked, there are two different implementations that can be applied with CSS:

For a CSS device, these dimensions are anchored either

i. by relating the physical units to their physical measurements, or
ii. by relating the pixel unit to the reference pixel.

This goes on to note:

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.

And finally, it concludes:

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. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

This means that the pixel unit is an absolute length, but its length can change depending on whether the device applies implementation i or implementation ii from the first part I've quoted here.

An absolute length, as defined by the CSS Values and Units Module, is simply a length which is “anchored to some physical measurement”. The physical measurement will either be their actual physical length or the length derived by the reference pixel.

The same section of the specificaiton also says:

For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

96px will not always equal 1 real-life inch.

这篇关于CSS像素是一个绝对单位吗？也就是说，1英寸= 96px是真的吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！