如何计算CSS像素大小?

在深入CSS单元的过程中,我遇到了参考像素的定义。 但是,我无法find一个与CSS像素单元关系的一致和全面的描述。 我在这方面做了一些研究,但对我还是有点不清楚。

1.收集到的信息


1.1像素定义

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

“设备像素” – 显示屏上的单个物理点。

和:

CSS像素 – 最接近匹配参考像素的单位。 [ 1 ]

同名的两个平行的概念绝对不能澄清混淆。 我完全理解介绍第二个的目的,但我觉得它的命名误导。 CSS像素被分类为绝对单位,并且:

“绝对长度单位是固定的相互关系。” [ 1 ]

上面的说法对于像素以外的每个单元都是非常明显的。 遵循w3c规范:

“对于一个CSS设备来说,这些维度要么通过将物理单元与物理测量相关联,要么通过将像素单元与参考像素相关联来锚定(i)。

(…)请注意,如果锚点单位是像素单位,则物理单位可能与其物理测量值不匹配。 或者,如果锚单元是物理单元,则像素单元可能不映射到整个设备像素。“[ 1 ]

考虑到上述引文,我假设绝对单位不是绝对的,因为它们可能会锚定在参考像素上。


1.2参考像素

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

“参考像素是指像素密度为96dpi,距离arm距离为读数的设备上的一个像素的可视angular度,对于标称臂长为28英寸,视angular大约为0.0213度。 [ 1 ]

以下图片显示的是:

在这里输入图像说明

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

“对于arm长度来说, 1px因此相当于大约0.26毫米(1/96英寸)”

抛开不一致的地方,我们能够build立一个angular度的价值:

α = 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 == PPI

这个测量允许我们猜测显示types。 快速检查:

  • iPhone 6( 4.7“ ,1334×750): 326 ppi ;
  • 索尼Bravia 4K( 54.6“ ,3840×2160): 75 ppi

所以,一般来说,越靠近用户所在的屏幕越大的PPI。 下面的表格[ 3 ]给出了具有特定DPI的设备的阅读距离推荐:

                ---------------------------------------
               |  DPI |  像素大小 |  阅读距离 |      
  -------------------------------------------------- ---
 |  PC的CRT |  96 |  〜0.2646毫米|  〜71厘米|     
 |  显示 |  |  |  |
  -------------------------------------------------- ---
 |  笔记本电脑的LCD |  125 |  0.2032毫米|  〜55厘米|
 |  显示 |  |  |  |
  -------------------------------------------------- ---
 |  平板电脑 |  160 |  〜0.159毫米|  〜43厘米|
  -------------------------------------------------- ---

但是,我不清楚这些距离值是如何得到的。 与function描述的DPI的关系还是仅仅是一个经验观察?

1.2.2设备像素比例

视网膜显示的推出使事情更加复杂化。 其PPI往往比非Retina大约大2倍,而推荐阅读距离应保持不变。 由于CSS像素大小不一定与设备像素大小相对应,因此我假设Retina显示屏上的单位大小首先被转换为参考像素大小 (以设备像素表示),然后乘以像素比率。 这是对的吗?

1.2.3缩放

放大时,显示的参考像素尺寸会增加[ 4 ],如果距离显示器有一定距离,则会增大。 这很违反直觉,因为这意味着我们正在从屏幕上“走开”,而不是靠近它。


2.问题


结束我的怀疑和清晰的问题:

  1. 锚点单位是物理单位时,如何计算CSS像素大小?
  2. 如何build立DPI与阅读距离关系的公式?
  3. 如何计算非标准,高DPI / PPI设备(如打印机和视网膜显示器)的CSS像素大小?

另外,如果我的推理是无效的,或者我错过了一些东西,请纠正我。 感谢您的回复。


3.参考


  1. W3C规范
  2. inamidst.com,肖恩B.帕尔默的网站
  3. Mozzilla黑客
  4. 1uirksmode.org

我可能是错的,但我不认为这是可能的CSS像素的物理单位作为主播。

基于这篇文章:

px单位是CSS的魔法单位。 它与当前字体无关 ,也与绝对单位无关 。 px单位被定义为很小但是可见,并且可以显示具有尖锐边缘的水平1px宽的线(没有抗锯齿)。 什么是尖锐的,小的和可见的取决于设备和使用方式:你是否像手机一样靠近你的眼睛,像电脑显示器一样,​​或者像书本一样在中间的某个地方? 因此px没有被定义为恒定的长度,而是取决于设备types和其典型用途。

更新:我错了。 目前在任何浏览器中都可能没有实现。 在确实如此的情况下,根据规范: “这些尺寸要么固定(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黑客文章中给出的例子较低:

以iPhone 4为例, 它配备了一个326 DPI显示屏。 根据我们上面的表格,作为智能手机,典型的观看距离为16.8英寸,基准像素密度为160 DPI。 为了创build一个CSS像素,Appleselect将设备像素比例设置为2,这有效地使iOS Safari以与在163 DPI电话上相同的方式显示网页。

这意味着我们有两个解决scheme – 物理(ppi)和CSS一个(cssppi)。 看来,cssppi用于计算参考像素大小,然后设备制造商select多less参考像素将映射到一个CSS像素(我假设这个数字等于设备像素比值,但不是100%肯定)。

下面是一些比较常用设备像素比例,ppi和cssppi的表格: http ://mydevice.io/devices/

有关更多信息和参考检查以下文章:

  • 列表除 – 像素身份危机
  • 每英寸像素和CSS Px
  • 在智能手机,平板电脑和公司的CSS单位的物理尺寸