使用密度描述符

Katie Hempenius
Katie Hempenius
X - Web开发指南

探索此演示

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

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

1x 密度 黑莓 Playbook，许多外部显示器
2x 密度 iPad 或 iPhone 5/6
3x 密度 Galaxy S5 或 iPhone X
  • 查看 index.html 以了解使此功能正常工作的代码。

它是如何工作的？

密度描述符的概念对大多数人来说可能很陌生。为了更好地理解它们，了解浏览器如何处理像素的一些背景知识会有所帮助。

什么是像素

让我们从最开始定义什么是像素。这听起来很简单，但“像素”实际上可以有很多含义

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

像素密度

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

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

随着 LED 显示器在 2000 年代变得普遍，这种情况开始发生变化。特别是，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 都是密度描述符，它们告诉浏览器图像 intended for 的像素密度。这使浏览器无需下载图像即可确定此信息。
  • 浏览器可以在三个图像之间进行选择：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 属性仅与宽度描述符一起使用。