如何计算CSS像素大小？

在深入研究CSS单位时，我遇到了参考像素的定义。然而，我不能找到一个一致和全面的描述其与CSS像素单位的关系。我对这件事做了一些研究，但它仍然有点不清楚我。

收集信息

1.1像素定义

一个像素有两种不同的类型/定义：

“Device pixel” — a single physical point on a display.

和：

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

同名的两个平行概念绝对不能澄清混乱。
我完全理解介绍第二个的目的，但我发现它的命名法误导。 CSS像素被分类为绝对单位和：

“Absolute length units are fixed in relation to each other.” [07000]

上面的语句对于除了像素之外的每个单元都是显而易见的。遵循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.” [07000]

考虑到上述引用，我假设绝对单位不是绝对的，因为它们可以被锚定到参考像素。

1.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.” [07000]

下图所示的是什么：

尽管将参考像素定义为视角，我们可以进一步阅读：

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

留下不一致性，我们能够建立一个角度的值：

α = 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;
> Sony Bravia 4K(54.6“，3840×2160)：75 ppi。

因此，一般来说，较大的PPI越接近用户所坐的屏幕。下表给出了对于具有特定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往往比非视网膜的大约2倍，而推荐的阅读距离应保持不变。
由于CSS像素大小不一定对应于设备像素大小，因此我假设视网膜显示器上的单位大小首先被转换为参考像素大小(以设备像素表示)，然后乘以像素比率。这是对的吗？

1.2.3缩放

在放大时，随着距显示器的距离增加，显示的参考像素尺寸增大。这是违反直觉的，因为这意味着我们正在从屏幕上“走开”，而不是越来越接近它。

2.问题

总结我的疑问和明确的问题：

>锚点单元是物理单元时如何计算CSS像素大小？
>如何建立DPI和阅读距离之间关系的公式？
>如何计算非标准，高DPI / PPI设备(如打印机和Retina显示器)的CSS像素大小？

此外，如果我的推理是无效的或我缺少的东西，请纠正我。感谢您的回复。

参考文献

> W3C规范
> inamidst.com，Sean B. Palmer的网站
> Mozzilla Hacks
> 1uirksmode.org

解决方法

我可能是错了，但我不认为CSS像素可能有物理单位作为锚点。

基于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目前没有在任何浏览器中实现。在情况确实如此，根据规格：“这些尺寸要么锚定(i)通过将物理单位与它们的物理测量相关联，意味着1px将等于物理英寸的1/96。

对于DPI和表中读取距离之间的关系，如果DPI = 96，则读取距离为〜71cm或28in，并且这些值成反比，这意味着更高的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

如何计算CSS像素大小？

解决方法

相关推荐