css能不能加计算公式,CSS3-如何计算CSS像素大小？

在研究CSS单元时，我遇到了参考像素的定义。 但是，我无法找到关于它与CSS像素单元的关系的一致且全面的描述。 我已经对此事进行了一些研究，但对我来说仍然有点不清楚。

1.收集的信息

1.1像素定义

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

“设备像素”-显示器上的单个物理点。

和：

CSS像素-最接近参考像素的单位。 [1]

相同名称下的两个平行概念绝对不能澄清混乱。我完全理解引入第二种方法的目的，但是我发现它的术语具有误导性。 CSS像素被归类为绝对单位，并且：

“绝对长度单位是相互固定的。” [1]

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

“对于CSS设备，这些尺寸要么是(i)通过将物理单位与其物理尺寸相关联，要么(ii)通过将像素单位与参考像素相关联来固定。

(...)请注意，如果锚点单位是像素单位，则物理单位可能与它们的物理尺寸不匹配。 或者，如果锚点单元是物理单元，则像素单元可能不会映射到设备像素的总数。” [1]

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

1.2参考像素

参考像素本身实际上是角度测量结果[2]：

“参考像素是设备上一个像素的可视角度，像素密度为96dpi，距读取器的距离为手臂的长度。对于标称的手臂长度为28英寸，因此，可视角度约为0.0213度。” [1]

下图显示了什么：

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

“对于按臂长阅读，因此1px相当于大约0.26毫米(1/96英寸)。”

撇开不一致之处，我们可以确定角度值：

α = 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越大，用户所坐的屏幕越近。 下表[3]给出了具有特定DPI的设备的阅读距离建议：

DPI | 像素大小| 阅读距离|  ———————————————————————————————————————————————————— ———| PC的CRT | 96 | 〜0.2646毫米| 〜71厘米||显示| | | |  ———————————————————————————————————————————————————— ———|便携式液晶显示器| 125 | 0.2032毫米| 〜55厘米||显示| | | |  ———————————————————————————————————————————————————— ———|平板电脑| 160 | 〜0.159毫米| 〜43厘米|  ———————————————————————————————————————————————————— ———

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

1.2.2设备像素比

视网膜显示器的推出使事情变得更加复杂。 它的PPI倾向于比非视网膜的PPI大约大2倍，而建议的阅读距离应保持不变。由于CSS像素大小不一定与设备像素大小相对应，因此我假设Retina显示器上的单位大小首先转换为参考像素大小(以设备像素表示)，然后乘以像素比率。 这是对的吗？

1.2.3缩放

放大时，显示的参考像素大小会增大[4]，因此与显示器的距离会增大。 这很违反直觉，因为这意味着我们正在“离开”屏幕，而不是靠近屏幕。

2.问题

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

当锚点单位是物理单位时，如何计算CSS像素大小？

如何建立DPI与阅读距离之间关系的公式？

对于非标准，高DPI / PPI设备(例如打印机和Retina显示器)，如何计算CSS像素大小？

另外，如果我的推理无效或缺少某些内容，请更正我。 感谢您的答复。

3.参考

W3C规格

inamidst.com，Sean B. Palmer的网站

Mozilla骇客

1uirksmode.org