探索此演示
- 如需预览网站，请按 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">
下面的示例将上述内容用文字表达出来：
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属性仅与宽度描述符搭配使用。