使用密度描述符

Katie Hempenius
Katie Hempenius
X

探索此演示

  • 如需预览网站，请按查看应用。然后按 全屏 全屏。
  • 使用不同的设备重新加载页面，以查看浏览器加载情况的不同 图片。

您可以使用设备模拟器执行此操作。如果您要查找特定显示屏 可以尝试以下设备：

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 属性仅 与宽度描述符结合使用