探索此演示版
- 如需预览网站，请按查看应用，然后按全屏
。 - 使用不同的设备重新加载页面，看看浏览器是否加载不同的图片。
您可以使用设备模拟器来实现此目的。如果您正在寻找特定的显示密度，可以尝试使用以下设备：
| 1 倍密度 | Blackberry Playbook，许多外部显示器 |
| 2 倍密度 | iPad 或 iPhone 5/6 |
| 3 倍密度 | Galaxy S5 或 iPhone X |
- 请查看
index.html获取实现此操作的代码。
运作方式
大多数人可能不熟悉密度描述符的概念。为了更好地理解这些概念，了解一些关于浏览器如何使用像素的背景信息会有所帮助。
什么是像素
我们首先要定义什么是像素。这听起来很简单，但“像素”实际上有很多含义：
- 设备像素（也称为“物理像素”）
- 设备上可显示的最小颜色点。
- 逻辑像素
- 用于指定网格上特定位置处的颜色的信息。 此类像素没有固有的物理尺寸，
- CSS 像素
- CSS 规范将像素定义为物理测量单位。1 像素 = 1 英寸的 1/96。
像素密度
像素密度（也称为“屏幕密度”或“显示密度”）用于测量设备像素在给定物理区域内的密度。此通常使用每英寸像素数 (ppi) 来衡量。
多年来，96 ppi 是一种非常常见的显示密度（因此 CSS 将像素定义为 1 英寸的 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的浏览器）。 - 对于不支持
srcset的浏览器，flower.jpg是后备图片。
使用方法：
- 使用 devicePixelRatio 和
x单位编写密度描述符。例如，许多 Retina 屏幕的密度描述符 (window.devicePixelRatio = 2) 将被写为2x。 - 如果未提供密度描述符，则假定它为
1x。 - 在文件名中包含密度描述符是一种常见惯例（这将有助于您跟踪文件），但这并不是必需的。图片可以采用任何文件名。
- 无需添加
sizes属性。sizes属性只能与宽度描述符一起使用。