使用密度描述符

Katie Hempenius
Katie Hempenius

探索此演示

  • 如需预览网站,请按 View App(查看应用)。然后按 Fullscreen(全屏)全屏
  • 使用不同的设备重新加载页面,看看浏览器是否会加载不同的图片。

您可以使用设备模拟器来实现此目的。如果您需要特定的显示密度,可以尝试使用以下设备:

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 英寸)。从 1980 年代开始,它就是 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 之间。

那么,您如何实际应用这些信息?

根据 device-pixel-ratio 调整图片大小

为了让图片在高分辨率屏幕上显示最佳效果,您需要为不同的 devicePixelRatios 提供不同的图片版本。

设备像素比 表示: 在这种设备上,如果 CSS 宽度为 250 像素的 <img> 标记的源图片为...
1 1 个设备像素 = 1 个 CSS 像素 宽度为 250 像素
2 2 个设备像素 = 1 个 CSS 像素 宽 500 像素
3 3 个设备像素 = 1 个 CSS 像素 宽度为 750 像素

需注意的事项:

  • 图片编辑器、文件目录和其他位置列出的像素尺寸是逻辑像素的测量值。
  • 对于分辨率更高的屏幕和更大的显示屏,您需要使用尺寸更大的图片。仅仅放大较小的图片会使提供多个图片版本的目的落空。如果未提供高分辨率图片,浏览器也会执行此操作。

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

密度描述符可与“srcset”属性结合使用,以向不同的 devicePixelRatio 提供不同的图片。

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

下面的示例将上述内容用文字表达出来:

  • 1x2x3x 都是密度描述符,用于告知浏览器图片的目标像素密度。这样,浏览器就不必下载图片来确定此信息。
  • 浏览器可以从以下三张图片中进行选择: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 属性仅与宽度描述符搭配使用。