html - CSS grid + srcset + sizes 适用于多种宽度和屏幕分辨率？

Question

我有一个 14 列的 CSS 网格，它在桌面上以页面为中心。我所有的图像都设置为 max-width: 100%，因此宽度取决于列容器的宽度。

<img src="image_path.jpg&s=image-390"
     srcset="image_path.jpg&s=image-390 390w,
             image_path.jpg&s=image-585 585w,
             image_path.jpg&s=image-780 780w,
             image_path.jpg&s=image-1170 1170w,
             image_path.jpg&s=image-1560 1560w,
     sizes="(min-width: 1023px) 300px, 100vw">

在台式机上，列中图像的宽度为 300 像素(4 列)，但是当我在设备比率为 2 的 Macbook Pro 上检查网络选项卡时，为什么它提供 585 图像？不应该是780吗？它是 300*2=600 那么下一张图片是 780 对吗？此外，如果我出于某种原因将其更改为 380px，它会拉出 780 图像(< 379px 拉出 585)，但为什么呢？这对我来说似乎很随意。 😖😖

Answer 1

发现 lazysizes 插件解决了我的问题。