Javascript 如何根据屏幕分辨率限制哪些图像可以随机显示

这是我第一次在这里发帖，所以我为任何错误道歉。另外，我对JavaScript还是新手！这是一种漂亮的编码语言，但我在这方面遇到了一些麻烦

现在，我来回答这个问题

我的目标很简单：我想在网站的一部分显示随机图像。问题是，由于该网站具有响应性设计，因此有两组图像，我正在处理的两种屏幕分辨率大小各一组

因此，换句话说，我想要实现的是：一组图像在使用较小屏幕时随机/显示，另一组图像在使用较大屏幕时随机/显示

到目前为止，我所做的是：

使用JavaScript代码对图像进行随机化。它是这样的：

jQuery（函数（）{
var objetos=新数组（）；
objetos[0]=“heregoesmypicture”；
objetos[1]=“HeregosMyPicture”；
objetos[2]=“HeregosmTypicture”；
objetos[3]=“HeregosmTypicture”；
objetos[4]=“HeregosmTypicture”；
objetos[5]=“HeregosmTypicture”；
objetos[6]=“HeregosmTypicture”；
objetos[7]=“Heregosmypicture”；
objetos[8]=“HeregosmTypicture”；
objetos[9]=“HeregosmTypicture”；
函数aleatorio（）{
var azar=Math.floor（Math.random（）*objetos.length）；
document.getElementById（“mi imagenali”）.src=objetos[azar]；
}
window.onload=aleatorio；
});

那么，有没有办法根据屏幕大小限制显示哪些图像？ 例如，当分辨率较小时显示图像0-4，当分辨率较大时显示图像5-9

---

提前谢谢

您可以使用CSS@media隐藏较小屏幕尺寸的“额外”图像。例如，如果屏幕大小为600px或更小，以下CSS将隐藏类为“hideme”的图像。如果需要，您可以使用几个@media段落。只需将class.hideme添加到要在较小的显示器上隐藏的图像集中

@media only screen and (max-width: 600px) {
  .hideme {
    display:none;
  }
}

---

那么，你会提前知道

0-4

&

5-9

，图像范围吗？是的，我已经知道图像的数量以及每个范围内的图像。我想过做类似的事情，但我不确定如何将class.hideme添加到图像中。我应该将其添加到JavaScript代码中吗？有可能吗？有几种方法。首先，如果页面的HTML是用PHP之类的脚本编写的，那么可以通过编程将.hideme类添加到其他图像中。可以使用如下示例使用JQuery完成：$（“img:odd”）.addClass（'.hideme'）；但这只是根据您提供的片段进行的猜测。

@media only screen and (max-width: 600px) {
  .hideme {
    display:none;
  }
}