解释下为什么在移动端切图时会有使用到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 属性来实现，因为它更加灵活和高效，并且可以根据不同的设备和视口宽度加载最合适的图片。