CSS像素尺寸是如何计算的?

68

在深入研究 CSS 单位时,我遇到了参考像素的定义。然而,我无法找到与 CSS 像素单位的关系一致且全面的描述。我对此进行了一些研究,但仍有点不太清楚。

1. 收集的信息


1.1 像素的定义

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

"设备像素" - 显示器上的单个物理点。

和:

CSS 像素 - 最接近参考像素的单位。[1]

两个平行的概念使用同一个名称肯定不能解决混乱。我完全理解引入第二个的目的,但是我认为它的命名具有误导性。CSS 像素被归类为绝对单位,并且:

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

上述语句似乎对每个单位都很明显,除了像素。根据 W3C 规范:

“对于 CSS 设备,这些尺寸要么通过将物理单位与其物理测量结果相关联来锚定(即)通过将像素单位与参考像素相关联来锚定。

(...)请注意,如果锚定单位是像素单位,则物理单位可能不匹配其物理测量结果。或者,如果锚定单位是物理单位,则像素单位可能无法映射到整数个设备像素。”[1]

考虑到上述引用,我认为绝对单位并不是完全绝对的,因为它们可以锚定到参考像素。


1.2 参考像素

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

“参考像素是具有96dpi像素密度和读者距离为手臂长度的设备上一个像素的视觉角度。对于28英寸的名义臂长,因此视觉角度约为0.0213度。”[1]

如下图所示:

enter image description here

尽管将参考像素定义为视觉角度,但我们仍然能够进一步阅读:

“在手臂长度处阅读,因此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. 问题


总结我的疑虑并提出问题:

  1. 当锚定单位为物理单位时,如何计算CSS像素大小?
  2. 如何建立DPI和阅读距离之间关系的公式?
  3. 如何计算非标准高DPI / PPI设备(如打印机和Retina显示器)的CSS像素大小?

如果我的推


3
你引用了CSS 2.1规范。一个更加更新的,虽然正式权威性较低的参考资料是CSS值和单位模块3级。无论如何,除了规范之外,我们还能说什么呢?只有意见和个人解释。 - Jukka K. Korpela
一句引言:“我认为绝对单位并不是那么绝对。” 在我看来,“绝对长度单位相对固定”这个说法意味着它们在同一设备上相对固定,因此像素是非常绝对的。 - Dmitry Koroliov
这个问题怎么可能没有社区的保护?!?它是一个非常好的问题。 - TheCrazyProfessor
3个回答

7
我可能错了,但我认为 CSS 像素不可能以物理单位作为锚点。
根据this文章:
引用: 像素(px)单位是CSS的魔法单位。它与当前字体无关,也与绝对单位无关。像素单位被定义为小而可见,可以显示具有尖锐边缘(无反锯齿)的水平1像素宽线条。什么是尖锐、小而可见的取决于设备和使用方式:您将其靠近眼睛,例如手机;还是像电脑显示器一样远离,臂长;或者介于两者之间,例如书?因此,像素不是一个常量长度,而是取决于设备类型及其典型使用方式的东西。 更新: 我错了。它是可能的,只是目前没有任何浏览器实现它。在这种情况下,根据规范: "这些尺寸要么通过将物理单位与其物理测量相关联来锚定 (i)",这意味着1像素将等于1/96英寸的物理英寸。
至于表格中DPI和阅读距离之间的关系,它认为如果DPI = 96,则阅读距离约为71厘米或28英寸,这些值是反比例的,这意味着更高的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像素,苹果选择将设备像素比设置为2,这有效地使iOS Safari以与163 DPI手机相同的方式显示网页。
因此,这意味着我们有两个分辨率-物理(PPI)和CSS(cssppi)。 看来cssppi用于计算参考像素大小,然后设备制造商选择将多少参考像素映射到一个CSS像素(我假设该数字等于设备像素比值,但不确定100%)。
这是一张比较一些常见设备像素比,PPI和cssppi的表格:http://mydevice.io/devices/ 有关更多信息和参考,请查阅以下文章:

2

过去的情况下,1个CSS像素= 96 DPI英寸监视器上的1个像素(旧Windows监视器普遍采用)。

今天,1个CSS像素=新的DPI显示器上的(???)像素(智能手机、新型显示器、电视等)。

现在有两种不同的解释“像素”的方式:过去和现在。这就是混淆的根源。但是,“CSS像素”一直是CSS像素。只是最近将其更名为“参考像素”,以帮助将CSS像素重新计算为新高清显示屏上的“设备像素”。在2011年之前,“旧CSS像素”与屏幕和打印机上的物理单位密切相关。至少,W3C建议要求供应商遵循该规范。直到iPhone的发明和后来的高清设备屏幕才导致“1个CSS像素=屏幕上的1/96英寸”的解释失败并被放弃。

解决方案是允许具有高清屏幕的制造商“重新解释”他们喜欢的“CSS像素”或“参考像素”为仅由他们控制的新“设备像素”。因此,现在,在屏幕上的给定物理尺寸内应该容纳多少CSS像素以及它对新数字设备上的观众的影响已经发生了变化。试图遵循1个CSS像素= 1/96英寸(通过用户查看距离来修改较小屏幕的)的新“设备像素”不再适用,因为屏幕PPI深度或“像素密度”已增加,观众的眼球距离屏幕的距离同时也变短(手机屏幕)或变长(电视屏幕),现在是可变的。这扰乱了我们在2000年左右所习惯的旧定义。

在今天的大多数新高清屏幕上,CSS像素现在会根据设备的大小和PPI重新创建为多个设备像素。如果没有这样做,旧Windows监视器上的72 DPI图像将在现代iPhone屏幕上看起来很小。但是您会注意到,每个电话和屏幕现在都有自己的像素密度(PPI或DPI),屏幕分辨率(像素宽度x高度),自己的物理视口大小(英寸),自己的默认缩放和字体调整系统,自己的布局规则(横向,等等),因此他们有自己的规则来将CSS像素重新解释为设备像素(2,3,4等)。您问什么是公式?我说没有公式。在我看来,该行业不遵循任何已知标准,自2010年放弃W3C标准以来就一直如此。

以下是一些历史,可能有所帮助...

CSS像素的历史

在 Web 开发的黄金时代(2010 年前),定义 Cascading Style Sheets(CSS)中的“英寸”(in)可以正确地与屏幕或印刷品上的英寸相对应,使每英寸 96 像素的读者在手臂长度处观看始终获得相同的体验。这就是为什么和如何发明了 96 每英寸的标准。它旨在强制制造商使用全能的数字或 CSS 像素给用户提供相同的视觉体验。
从 1990 年代开始,这些 CSS 标准落在了计算机操作系统制造商和他们的显示器上。在 2011 年之前的旧 Windows 和 Mac 屏幕上正确执行时,它们会正确映射 96 DPI。你可以看到 Mac 和 Windows 计算机屏幕正确地将正确的像素每英寸放置到屏幕上,以便 CSS “像素” 可以始终一致地安装到其中,而不管制造商、供应商、屏幕或设备如何。由于它们略微不同的屏幕尺寸和像素密度,网站显示方面存在视觉差异。但这是基于他们对于他们的观众来说视觉大小应该是多大或多小的看法。但这并没有改变整体的 CSS 标准。
在 2000 年之前,在浏览器中的网站“英寸”在大多数屏幕上看起来接近于一英寸,并且对于大多数观众都是这样工作的。当然,你可以增加分辨率或将多少像素塞入屏幕中。但这并没有改变 96 每英寸规则,因为它基于用户可能会从默认值选择更大或更小的文本或 DPI 的自然假设。那时候这和缩放是一样的。但在 2000 年之后,CSS 像素和数百万支持网站完美地适配了数百万台桌面屏幕、设备和印刷页面。
在 2007 年之前,大多数屏幕将每个网页和 CSS 像素转换为“每英寸”的期望。因此,作为开发者,我们最初开始尝试使用标准的 96 DPI 和 Windows 显示器以及 72 DPI 的 Mac 屏幕将基于像素的布局和我们喜欢的字体大小选择适应严格的物理布局。当然,在 2001 年之后,显示器变得越来越大,分辨率设置也越来越高。但每个人都知道一英寸仍然是一英寸,一个像素仍然是一个像素。我们可以设计网站布局以基于 96 DPI 的标准扩展和增长。
然而,我们始终知道 Mac 使用的是 72 DPI,因为在 2000 年的时候,我作为一个 Web 开发者记得使用这个系统,它运行得非常好。但是,在测试 Mac 和 Windows 上的网站时,我记得看到了一个奇怪的效果... 网站在 Mac 屏幕上看起来稍微大一些。因为 72 DPI 是最低公共分母,所以我们将其用于默认分辨率,包括图像大小、像素网站布局等。这就是为什么现在网络上有那么多 72 DPI 的图像。但是,在 2000 年之后的十年里,这很好地运作了。CSS 像素按预期工作!
iPhone 2007年iPhone问世后,96 DPI像素的概念开始发生变化。为什么?小屏幕上每英寸像素数(PPI)的分辨率大幅增加。这意味着,在200 PPI的情况下,即高密度iPhone小屏幕设备的一般分辨率,普通网站看起来会很小,压缩,文本难以阅读,图像大小不到Windows 96 DPI监视器上预期大小的一半。
但这就是CSS像素应该工作的方式。CSS解决这些小屏幕、高分辨率问题的方式是使用“手持”媒体查询。
我记得使用CSS“手持”构建网站,并调整布局中的像素,甚至为iPhone展示更高分辨率的图像。这在最初是有效的,除了一个简单的事实……这些新的屏幕和设备拒绝采用CSS标准!为什么?他们希望数百万个网站在没有特殊的CSS适应的情况下看起来好看。在我的书中,这是一种失败,但se la vi。
所以……到2011年,W3C意识到他们伟大的标准永远不会在这些新的供应商设备上保持一致,这些设备希望快速获得利润,而不是遵循标准。因此,他们将定义翻转到以96 DPI作为“参考”像素,然后允许供应商继续创建更高分辨率的屏幕,但随后将CSS像素“重新解释”为他们控制的“设备像素”。
2011年之后,W3C停止期望常见的显示器、屏幕和设备在屏幕上正确定义CSS中的绝对尺寸单位(cm、mm、in等)。这是因为制造高清屏幕的供应商开始增加分辨率,所以网站变得越来越小,直到CSS标准崩溃。那时,“设备像素”的概念诞生了,其中设备通过将多个像素塞入其中来重新创建您的CSS像素。
这意味着什么?这意味着每个设备都会自动重新生成您的网站设计及其参考CSS像素到新的像素大小。换句话说,在这些小屏幕上,您的网站默认情况下会变得更大,更易读。您的1个像素可能会被重新映射到2个像素。平均“设备像素”范围现在为2-4。苹果iPhone用户没有选择如何选择翻译CSS像素,当他们的高分辨率设备出现时。如果他们没有适应新的设备像素解释,我们将在400+ dpi视网膜显示器和4k监视器上看到非常微小的72 dpi GIF,并在数百万个新现代设备上拥有无法阅读的网站。
您无法控制这一点。您所能做的就是专注于避免严格基于像素的布局和PPI/DPI图像,并专注于网站布局的灵活性。这就是为什么我在2022年避免使用像素,并尝试使用基于文本的单位布局,这些布局根据用户的字体大小和使用绝对字体大小单位布局和rem/em单位而变化,而不是像素。我的网站现在自然地拉伸以填充屏幕、手机、监视器或电视设置的任
但这就是“设备像素”产生的原因,也是像素现在非常难以控制的原因。在大多数情况下,设备像素只是给出了两倍或三倍于网站像素的值。它试图计算出有多少个Web设计CSS像素被塞进了他们物理高清显示器的一英寸空间中。
如今建立网站的年轻人认为这总是这样的。他们不知道。这就是为什么大多数经验丰富的现代Web开发人员现在使用相对字体大小并避免使用像素作为任何单位。这样做,您的布局可以根据需要填充屏幕和奇怪的视口,适应用户更大或更小的字体大小,使用用户的缩放设置或者只是使用设备默认的设备像素设置来进行伸展。由于这种混乱,我们不再受到精确基于像素的布局的限制。页面可以在网站中拉伸以填满可用空间。但是,许多正在开发网站的年轻人仍然执着于“CSS像素”,好像它是上帝一样。它不是,伙计们。它已经过时了。
我认为这就是我们为什么会陷入困境,以及为什么新的屏幕技术摧毁了曾经非常简单和优雅的网站技术。今天它是一团糟!为什么?因为供应商讨厌标准。他们从未能够作为一个技术行业走到一起并定义它。在采用任何标准上都没有钱可赚。因此,随着新设备在线上线,这个网站像素转换问题将会变得更加严重。到那时,CSS可能会采用一种“黑客”方式来控制像素的显示。事实上,在CSS3中,您已经可以嗅探分辨率,根据物理视口大小、移动设备、设备像素设置、缩放、媒体查询等设置尺寸。
但是,这些新想法并不能帮助解决问题。它们只是增加了复杂性和混乱,而不是迫使所有屏幕和设备制造商使用相同的简单CSS像素,这应该是过去和现在所有屏幕通用的。

0

引用规范:

对于 CSS 设备,这些尺寸要么通过将物理单位与其物理测量相关联(i),要么通过将像素单位与参考像素相关联(ii)来定位。对于打印媒体和类似的高分辨率设备,锚定单位应该是标准物理单位之一(英寸、厘米等)。对于低分辨率设备和具有不寻常观看距离的设备,建议使用像素单位作为锚定单位。对于这种设备,建议像素单位指代最接近参考像素的整数设备像素。

参考像素是一个像素密度为 96dpi、读者距离为手臂长度的设备上一个像素的视觉角度。对于一个名义手臂长度为 28 英寸,视觉角度约为 0.0213 度。在手臂长度处阅读时,1px 相当于约 0.26 毫米(1/96 英寸)。

下面的图片说明了观看距离 d 对参考像素 y 大小的影响。此图概括了规范中显示的图像。

enter image description here

从上述引语中,我得出了以下结论。
  1. 像素单位px是绝对的,由方程式1px = 1/96in定义。对于ppi为96的屏幕,当从28英寸的距离观看屏幕时,1px的长度对应于设备像素的实际边长。

  2. 对于其他设备,制造商根据像素密度ppi选择最佳距离d。制造商如何找到最佳距离是他的秘密。

  3. 然后,参考像素由y给出。通过截距定理,有y = d /(28 * 96)。

  4. 现在,y必须由设备像素的整数ndevpix最佳近似。ndevpx的值取决于屏幕的ppi,并且由以下公式给出:

    ndevpx = Int(y * ppi)= Int((d * ppi)/(28 * 96)),

    其中Int(x)是数字x的最佳整数近似。

  5. 例如iPhone SE:ppi = 326,d = 16.8,ndevpx = Int(2.03)。因此,苹果公司选择了2个设备像素来表示1px。


你能为“单位px是绝对的,并由方程式1px = 1/96in定义”引用一个来源吗? - Martin
1
CSS像素一词是与CSS绝对长度单位px同义的术语,其规范定义为恰好为1/96个CSS英寸(in)。 - Dietrich Baumgarten

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接