在深入研究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英寸) . ”
抛开不一致之处,我们可以 Build 角度值:
α = 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往往比非Retina大约2倍's, while a recommended reading distance should remain the same. Since a CSS pixel size doesn' t必然与设备像素大小相对应,我假设Retina显示器上的单元尺寸首先被转换为参考像素 size (以设备像素表示)然后乘以像素比率 . 这是对的吗?
1.2.3缩放
放大时,显示的参考像素大小会增加[4],与显示器的距离会增加 . 这是违反直觉的,因为这意味着我们是从屏幕上看到的,而不是越来越接近它 .
2.问题
总结我的怀疑和阐述问题:
-
当锚单位是物理单位时,如何计算CSS像素大小?
-
如何 Build DPI与阅读距离之间关系的公式?
-
如何为非标准的高DPI / PPI设备(如打印机和Retina显示器)计算CSS像素大小?
另外,如果我的推理无效或者我遗失了某些内容,请纠正我 . 谢谢你的回复 .
3.参考文献
-
W3C规范
-
inamidst.com,Sean B. Palmer的网站
-
Mozzilla Hacks
-
1uirksmode.org
1 回答
我可能错了,但我不认为CSS像素可以将物理单位作为锚点 .
基于this文章:
UPDATE: 我错了 . It is possible目前尚未在任何浏览器中实现 . 在情况确实如此的情况下,根据规范: "these dimensions are either anchored (i) by relating the physical units to their physical measurements" 意味着1px将等于物理英寸的1/96 .
至于表中DPI与读取距离之间的关系,如果DPI = 96则读取距离为~71cm或28in,这些值为 inversely proportional 意味着更高的DPI将导致更小的读取距离 .
从中可以很容易地得出一个公式:
对于更高分辨率的设备,Mozilla Hacks文章中给出了一个较低的示例:
这意味着我们有两个分辨率 - 物理(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