如何计算CSS像素大小？

时间：2014-12-09 15:14:14

标签： css css3 screen pixel frontend

在深入研究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 mm（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往往比非Retina的大约2倍，而推荐的阅读距离应该保持不变。 由于CSS像素大小不一定与设备像素大小相对应，我假设Retina显示器上的单元大小首先被转换为参考像素大小（以设备像素表示）然后相乘按像素比率。这是对的吗？

1.2.3缩放

放大时，显示的参考像素大小会增加[4]，与显示器的距离会增加。这是违反直觉的，因为这意味着我们正在“离开”屏幕，而不是越来越接近它。

2。问题

总结我的怀疑和阐述问题：

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

    4. 另外，如果我的推理无效或我遗失了某些内容，请纠正我。谢谢你的回复。

    3。参考

    1. W3C规范
    2. inamidst.com，Sean B. Palmer的网站
    3. Mozzilla Hacks
    4. 1uirksmode.org

2 个答案:

答案 0 :(得分：7)

我可能错了，但我认为CSS像素可能将物理单位作为锚点。

基于this文章：

  

px单元是CSS的神奇单元。它与当前无关   字体以及与绝对单位无关。 px单位是   定义为小但可见，并且水平宽度为1px   可以使用锐边显示线条（无抗锯齿）。什么是   锐利，小巧和可见取决于设备及其使用方式：   你把它靠近你的眼睛，就像一部手机，握在手臂上   长度，像电脑显示器，或介于两者之间的某个地方，就像一本书？   因此，px不被定义为恒定长度，而是定义为   取决于设备的类型及其典型用途。

更新：我错了。 It is possible目前尚未在任何浏览器中实现。在情况确实如此的情况下，根据规范：＆＃34;这些维度要么锚定（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 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/

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

答案 1 :(得分：1)

1 像素 = 96 ppi 显示器上的 1 像素

1 像素 = ?像素较新？ ppi显示

这就是混乱。为什么？因为在 1987 年智能手机和高清设备问世之后，制造商认为所有东西看起来都太小了，所以他们试图将网站和每英寸网站布局中的像素增加一倍或三倍。于是“设备像素”诞生了。设备像素仅包含给定它的网站像素的两倍或三倍。它试图控制在其物理高清显示器的一英寸中塞满了多少网页设计像素。

今天的孩子们建立网站只是假设它一直都是这样。哈哈。他们毫无头绪。这就是为什么大多数成熟的现代 Web 开发人员现在使用相对字体大小并避免将像素作为任何单位的原因。这样做，您的布局现在可以根据填充当今使用的微小或巨大视口所需的百分比、用户更大或更小的字体大小、用户的缩放设置或仅设备及其字体的默认字体大小进行拉伸。设备像素开箱即用。由于这种混乱，我们不再受制于精确的基于像素的布局。页面伸展以填充那里的内容。但是很多开发网站的孩子仍然执着于“css像素”，仿佛它是上帝。不是。它死了。

一个有趣的事实......几年前 CSS 选择选择每英寸 96 像素标准时，只有 Windows 有这种分辨率，Mac 没有。所以 Mac 用户被困在每英寸 72 个点上。这意味着 Mac 用户总是看到稍大的网站。在 72 dpi 显示器上拉伸的 96 像素获得了一些物理空间。当然，如果他们更改了设置，也可能会更改您的网站 CSS 显示并开始使用分辨率更高的显示器。但是我们都立即开始看到这个破碎的 CSS 标准中的裂缝。 1987年以后基本没有标准了。

在 1987 年之前，大多数开发人员多年前将每个 CSS 像素转换为“每英寸”预期，我们最初开始尝试使用标准 96 dpi 和 Windows 显示器将布局和我们的字体大小选择适合物理布局。但我们一直都知道 Mac 人对事物的看法不同。因为 72 dpi 是我们用于所有事物的最低公分母，包括图像大小、以像素为单位的 Web 布局等。这就是为什么现在 Web 上有这么多 72 dpi 图像以及为什么 Apple iPhone 用户别无选择的原因当他们的高分辨率设备出现时，他们选择翻译 CSS 像素。如果他们不这样做，我们都会在 400+ dpi 视网膜显示器和网络上的 4k 显示器上看到非常微小的 72 dpi GIF！

我认为这就是我们到达这里的原因以及为什么新的屏幕技术破坏了过去非常简单和优雅的网站技术。今天一团糟！为什么？因为供应商讨厌标准。他们永远无法作为一个科技行业走到一起并定义它。采用任何一种都没有钱。

因此，随着未来 50 年新设备上线，这个网站像素翻译问题会变得更糟。届时 CSS 可能会采用“hack”，让我们能够根据分辨率、物理视口大小、设备像素设置、缩放等来控制像素的显示方式。

相关问题
最新问题