使用密度描述符

Katie Hempenius
Katie Hempenius
X

探索此演示

  • 如需预览网站，请按查看应用。然后按全屏 全屏。
  • 使用不同的设备重新加载页面，查看浏览器加载不同的图片。

您可以使用设备模拟器来执行此操作。如果您要寻找特定的显示密度，可以尝试以下设备：

1 倍密度 Blackberry Playbook、许多外接显示器
2 倍密度 iPad 或 iPhone 5/6
3 倍密度 Galaxy S5 或 iPhone X
  • 如需查看实现此功能的代码，请参阅 index.html。

工作原理

大多数人可能不熟悉密度描述符的概念。为了更好地理解这些单位，有必要先了解一下浏览器如何处理像素。

什么是像素

我们先从最基础的概念开始，定义什么是像素。这听起来很简单，但“像素”实际上可以有多种含义：

设备像素（也称为“物理像素”）
设备上可显示的最小颜色点。
逻辑像素
指定网格上特定位置颜色的信息。 这种像素没有固定的物理尺寸。
CSS 像素
CSS 规范将像素定义为物理测量单位。1 像素 = 1/96 英寸。

像素密度

像素密度（也称为“屏幕密度”或“显示密度”）用于衡量给定物理区域内的设备像素密度。通常使用每英寸像素数 (ppi) 来衡量。

多年来，96 ppi 一直是非常常见的显示密度（因此 CSS 将像素定义为 1/96 英寸）。从 20 世纪 80 年代开始，它就是 Windows 的默认分辨率。此外，它还是 CRT 显示器的分辨率。

随着 LED 显示器在 21 世纪初普及，这种情况开始发生变化。尤其是 Apple 在 2010 年推出 Retina 显示屏时，引起了巨大轰动。这些显示屏的最低分辨率为 192 ppi，是“常规”显示屏分辨率 (192 ppi/96 ppi = 2) 的两倍。

window.devicePixelRatio

随着更新的显示技术的引入，“设备像素”的物理尺寸和形状开始发生变化，不再与“CSS 像素”的大小相同。由于需要定义“设备像素”和“CSS 像素”的大小之间的关系，因此引入了 devicePixelRatio（有时称为“CSS 像素比”）。

devicePixelRatio 定义了特定设备的设备像素与 CSS 像素之间的关系。192 ppi 设备的 devicePixelRatio 为 2 (192 ppi/96 ppi = 2)，因为“其 2 个显示像素的大小相当于 1 个 CSS 像素”。

如今，大多数设备的设备像素比都在 1.0 到 4.0 之间。

  • 在控制台中输入 window.devicePixelRatio，确定设备的像素密度。

  • 请参阅此表格，了解常见设备的像素比。大多数值介于 1.0 和 4.0 之间。

那么，如何实际应用这些信息呢？

根据设备像素比调整图片大小

为了让图片在高分辨率屏幕上呈现最佳效果，您需要针对不同的 devicePixelRatios 提供不同的图片版本。

设备像素比 表示： 在此设备上，如果 CSS 宽度为 250 像素的 <img> 标记的来源图片为以下尺寸，则显示效果最佳：
1 1 个设备像素 = 1 个 CSS 像素 宽度为 250 像素
2 2 个设备像素 = 1 个 CSS 像素 500 像素宽
3 3 个设备像素 = 1 个 CSS 像素 宽度：750 像素

需注意的事项：

  • 图片编辑器、文件目录和其他位置中列出的像素尺寸是逻辑像素的测量值。
  • 对于分辨率更高、显示屏更大的设备，您需要使用尺寸更大的图片。仅仅放大较小的图片无法达到提供多个图片版本的目的。如果未提供高分辨率图片，浏览器无论如何都会这样做。

使用密度描述符提供多个
图片

密度描述符可与“srcset”属性结合使用，以便为不同的 devicePixelRatios 提供不同的图片。

  • 查看 index.html 文件，并注意 <img> 元素。
<img src="flower.jpg"
  srcset="flower-1x.jpg 1x,
          flower-2x.jpg 2x,
          flower-3x.jpg 3x">

此示例用文字表述如下：

  • 1x、2x 和 3x 都是密度描述符，用于告知浏览器图片适用的像素密度。这样，浏览器就无需下载图片来确定这些信息。
  • 浏览器可以在以下三张图片之间进行选择：flower-1x.jpg（适用于像素密度为 1.0 的浏览器）、flower-2x.jpg（适用于像素密度为 2.0 的浏览器）和 flower-3x.jpg（适用于像素密度为 3.0 的浏览器）。
  • flower.jpg 是不支持 srcset 的浏览器的后备图片。

使用方法：

  • 使用 devicePixelRatio 和 x 单位编写密度描述符。例如，许多 Retina 屏幕 (window.devicePixelRatio = 2) 的密度描述符会写为 2x。
  • 如果未提供密度描述符，则假定为 1x。
  • 在文件名中包含密度描述符是一种常见惯例（有助于您跟踪文件），但并非必需。图片可以采用任何文件名。
  • 无需添加 sizes 属性。sizes 属性仅与宽度描述符一起使用。