Javascript Html：在页面加载时加载方便的图像大小？

我在gridView表中有一个图像，它根据屏幕分辨率有不同数量的列。Html代码如下：

如你所见，我有6个关于“ld”分辨率的专栏；4列“md”决议；等等

最后，我的图像_resolution_XXX.jpg的实际/显示分辨率实际上事先并不知道。它取决于设备的屏幕分辨率，因此也取决于网格的列数

我的图像根据其分辨率存储在我的服务器上的不同文件夹中：文件夹“128x128”、“256x256”等

我希望避免在gridView中加载大分辨率图像，例如：image\u resolution\u 512.jpg，如果只需要较小的分辨率例如：image\u resolution\u 256.jpg。此外，如果需要更高的分辨率，我希望避免加载小分辨率图像

如何在加载时加载正确的分辨率

也许一种简化的方法是为xs设备定义XXX像素的图像分辨率，为md设备定义YYY像素的图像分辨率，等等。。。可能吗

---

谢谢你的帮助

你可以做一些类似于

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="css/ldpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="css/mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="css/hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="css/retina.css" />

然后通过每个不同的CSS文件管理要在图像容器中显示的图像？

如果是属性

例如：

<img src="clock-demo-thumb-200.png" 
    alt="Clock" 
    srcset="clock-demo-thumb-200.png 200w, clock-demo-thumb-400.png 400w"
    sizes="(min-width: 600px) 200px, 50vw">

似乎有一个不支持srcset的for浏览器

---

如果是CSS，请使用媒体查询。

也许CSS媒体查询可以帮助您解决这个问题。问题中缺少HTML代码。这适用于CSS中的图像。如果html页面中有标签？