首页 文章

如何计算CSS像素大小?

提问于
浏览
54

在深入研究CSS单元时,我遇到了参考像素的定义 . 但是,我无法找到与CSS像素单元关系的一致而全面的描述 . 我已就这件事做了一些研究,但对我来说还是有点不清楚 .

1.收集到的信息


1.1像素定义

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

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

和:

CSS像素 - 与参考像素最匹配的单位 . [1]

同名的两个平行概念肯定不能澄清混淆 . 我完全理解引入第二个目的的目的,但我发现它的命名法误导了 . CSS像素被归类为绝对单位,并且:

“绝对长度单位相对于彼此固定 . ” [1]

除了像素之外,上述声明似乎对于每个单位都非常明显 . 遵循w3c规范:

“对于CSS设备,这些尺寸要么锚定(i)通过将物理单位与其物理测量相关联,或者(ii)将像素单元与参考像素相关联 . (...)注意,如果锚单位是像素单位,物理单位可能与他们的物理测量不匹配 . 或者,如果锚单位是物理单位,像素单位可能不会映射到整数设备像素 . [1]

考虑到上述引用,我假设绝对单位不是绝对的,因为它们可以锚定到参考像素 .


1.2参考像素

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

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

图片如下图所示:

enter image description here

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

“对于手臂长度的读数,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 回答

  • 7

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

    基于this文章:

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

    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将导致更小的读取距离 .

    从中可以很容易地得出一个公式:

    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/

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

相关问题