探索此演示
- 如需预览网站，请按查看应用。然后按
全屏
。 - 使用不同的设备重新加载页面，以查看浏览器加载情况的不同 图片。
您可以使用设备模拟器执行此操作。如果您要查找特定显示屏 可以尝试以下设备：
| 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 年代开始，它成为了默认分辨率 。此外，还采用了 CRT 技术的分辨率 监控。
随着 21 世纪 LED 显示器的兴起，这种情况开始发生改变。具体来说， 2010 年，Apple 推出了 Retina 显示屏，大受欢迎。这些 显示屏的最小分辨率为 192 ppi， “regular”显示屏分辨率 (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 提供不同的映像版本。
| 设备像素比 | 表示： | 在这个设备上，一个<img>CSS 宽度为 250 像素的代码 当源图片为以下图片时，效果最好... |
|---|---|---|
| 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属性仅 与宽度描述符结合使用