如何计算CSS像素大小？

Question

在深入研究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 ;
• 索尼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设备像素比

Retina显示器的引入使问题更加复杂.它的PPI往往比非Retina的大约2倍,而推荐的阅读距离应该保持不变.由于CSS像素大小不一定与设备像素大小相对应,因此我假设Retina显示器上的单元大小首先被转换为参考像素大小(以设备像素表示),然后乘以像素比率.这是对的吗？

1.2.3缩放

放大时,显示的参考像素大小增加[ 4 ],与显示器的距离增大.这是违反直觉的,因为这意味着我们正在"离开"屏幕,而不是越来越接近它.

---

2.问题

---

总结我的怀疑和阐述问题:

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

另外,如果我的推理无效或者我遗失了某些内容,请纠正我.谢谢你的回复.

---

3.参考文献

---

1. W3C规范
2. inamidst.com,Sean B. Palmer的网站
3. Mozzilla Hacks
4. 1uirksmode.org

Answer 1

我可能错了,但我认为CSS像素不可能将物理单位作为锚点.

基于这篇文章:

px单元是CSS的神奇单元.它与当前字体无关,也与绝对单位无关.px单元被定义为小但可见,并且可以显示具有锐边的水平1px宽线(无抗锯齿).什么是锋利的,小的和可见的取决于设备和它的使用方式:你把它靠近你的眼睛,如手机,手臂长度,如电脑显示器,或介于两者之间,如书？因此,px不被定义为恒定长度,而是取决于设备的类型及其典型用途.

更新:我错了.目前可能没有在任何浏览器中实现.在情况确实如此的情况下,按照规范:"这些尺寸要么通过将物理单位与其物理尺寸相关联来锚定(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文章中给出了一个较低的示例:

让我们以iPhone 4为最着名的例子.它配备326 DPI显示屏.根据我们上面的表格,作为智能手机,它的典型观看距离是16.8英寸,它的基线像素密度是160 DPI.为了创建一个CSS像素,Apple选择将设备像素比率设置为2,这有效地使iOS Safari显示网页的方式与在163 DPI手机上相同.

这意味着我们有两个分辨率 - 物理(PPI)和CSS(cssppi).似乎cssppi用于计算参考像素大小,然后设备制造商选择它们将映射到一个CSS像素的参考像素数量(我假设这个数字等于设备像素比值但不是100%肯定).

这里有一些常见设备像素比率,PPI和cssppi的比较表:http://mydevice.io/devices/

有关更多信息和参考,请查看以下文章:

• 列表分开 - 像素身份危机
• 每英寸意识和CSS Px的像素
• 智能手机,平板电脑和公司的CSS单位的物理尺寸