探索此演示
- 如需预览网站,请按查看应用,然后按全屏 。
- 使用不同的设备重新加载页面,看看浏览器是否会加载不同的图片。
您可以使用设备模拟器来实现此目的。如果您需要特定的显示密度,可以尝试使用以下设备:
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 英寸的 1/96 分之一)。从 1980 年代开始,它就是 Windows 的默认分辨率。此外,它也是 CRT 显示器的分辨率。
随着 21 世纪 LED 显示器的兴起,这种情况开始发生改变。特别是,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”属性结合使用,以向不同的 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
属性仅与宽度描述符搭配使用。