在深入研究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. …