在深入研究 CSS 单位时,我遇到了参考像素的定义。然而,我无法找到与 CSS 像素单位的关系一致且全面的描述。我对此进行了一些研究,但仍有点不太清楚。
1. 收集的信息
1.1 像素的定义
像素有两种不同的类型/定义:
"设备像素" - 显示器上的单个物理点。
和:
CSS 像素 - 最接近参考像素的单位。[1]
两个平行的概念使用同一个名称肯定不能解决混乱。我完全理解引入第二个的目的,但是我认为它的命名具有误导性。CSS 像素被归类为绝对单位,并且:
“绝对长度单位是相对于彼此固定的。”[1]
上述语句似乎对每个单位都很明显,除了像素。根据 W3C 规范:
“对于 CSS 设备,这些尺寸要么通过将物理单位与其物理测量结果相关联来锚定(即)通过将像素单位与参考像素相关联来锚定。
(...)请注意,如果锚定单位是像素单位,则物理单位可能不匹配其物理测量结果。或者,如果锚定单位是物理单位,则像素单位可能无法映射到整数个设备像素。”[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 | 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 tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends tends to be approximately 2 times bigger than non-Retina one's, 而推荐的阅读距离应保持不变。由于CSS像素大小不一定对应设备像素大小,因此我假设Retina显示屏上的单元大小首先被转换为参考像素尺寸(以设备像素表示),然后乘以像素比。这是正确的吗?
1.2.3 缩放
在缩放时,显示的参考像素大小增加[4],因此与显示器的距离增加。这相当反直觉,因为它意味着我们正在“远离”屏幕,而不是靠近它。
2. 问题
总结我的疑虑并提出问题:
- 当锚定单位为物理单位时,如何计算CSS像素大小?
- 如何建立DPI和阅读距离之间关系的公式?
- 如何计算非标准高DPI / PPI设备(如打印机和Retina显示器)的CSS像素大小?
如果我的推