解释下为什么在移动端切图时会有使用到2倍图片呢?
在移动端切图时使用 2 倍图(或 3 倍图)是为了应对高分辨率屏幕的显示需求,从而保证图片的清晰度。这与设备像素比 (Device Pixel Ratio, DPR) 密切相关。
理解 DPR:
DPR 指的是设备物理像素与 CSS 像素的比率。例如,一个 DPR 为 2 的设备,意味着 1 个 CSS 像素对应 2 个物理像素。 高 DPR 的设备屏幕分辨率更高,像素密度更大,可以显示更清晰的图像。
为什么需要 2 倍图:
假设有一个 100px * 100px 的图片,在 DPR 为 1 的设备上显示正常。 但在 DPR 为 2 的设备上,如果仍然使用这张 100px * 100px 的图片,浏览器会将其拉伸到 200px * 200px 的物理像素上显示。 这会导致图片模糊,因为图片的细节信息不足以填充更多的物理像素。
为了解决这个问题,我们需要提供一张 200px * 200px 的图片 (2 倍图),在 DPR 为 2 的设备上显示。 这样,每个 CSS 像素都能对应到足够的物理像素,从而保证图片的清晰度。
如何使用 2 倍图:
通常使用 srcset
属性结合媒体查询或 JavaScript 来根据设备的 DPR 加载合适的图片。
1. 使用 srcset
和 sizes
属性 (推荐):
<img src="image.jpg" srcset="image@2x.jpg 2x, image@3x.jpg 3x" sizes="(max-width: 768px) 100vw, 50vw">
srcset
属性列出了不同分辨率的图片以及它们的缩放倍数。sizes
属性定义了图片在不同视口宽度下的尺寸。 浏览器会根据视口宽度和 DPR 选择最合适的图片进行加载。
2. 使用媒体查询:
/* DPR 为 2 的设备 */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
.image {
background-image: url('image@2x.jpg');
}
}
3. 使用 JavaScript:
const dpr = window.devicePixelRatio;
const image = document.querySelector('.image');
if (dpr >= 2) {
image.src = 'image@2x.jpg';
}
总结:
使用 2 倍图或 3 倍图可以提高图片在高分辨率屏幕上的显示质量,避免图片模糊。 推荐使用 srcset
和 sizes
属性来实现,因为它更加灵活和高效,并且可以根据不同的设备和视口宽度加载最合适的图片。