解决图片放大模糊

首先需要了解设备像素和CSS像素，CSS像素 是 Web 开发中的逻辑像素，设计者根据这些像素来布局页面。设备像素 是设备屏幕上的实际像素点数。

DPR 是 设备像素 和 CSS像素 的比率，所以进行缩放后，也需要对图片尺寸进行处理，以确保清晰度。图像尺寸 = CSS尺寸 * DPR。

可以通过 window.devicePixelRatio 获取当前缩放比例

将图片尺寸根据DPR缩放，150 * 4

更加清晰了

可以使用 srcset 属性设置多个尺寸的图片，浏览器会自动选择最合适的图片

当图片宽高不固定时，上面的方法就不适用了，因为无法确定CSS像素大小，需要使用下面写法

w标识设备像素，浏览器会根据当前设备的视口宽度，结合 sizes 属性计算出图片实际在页面上占据的尺寸（CSS 像素）。然后根据 srcset 中提供的图片宽度选择最合适的图片。

如果视口宽度为 400 像素，且 sizes 指定图片占据 50vw，则图片会占据视口宽度的一半，也就是 200 像素。浏览器会在 srcset 中选择最接近 200 像素的图片，也就是宽度为 300 像素的图片（300w）。