探索此演示版
- 如需预览网站,请按查看应用,然后按全屏 。
- 使用不同的设备重新加载页面,看看浏览器是否加载不同的图片。
您可以使用设备模拟器来实现此目的。如果您正在寻找特定的显示密度,可以尝试使用以下设备:
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
属性只能与宽度描述符一起使用。