首先需要了解设备像素 和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)。