Html 媒体查询到目标特定类或id？

我正在为一个辅助项目的“图库”部分工作，我试图根据屏幕大小完成不同的图像显示方法。 在桌面和平板电脑大小下，它将显示为网格，类似于vsco.grid或苹果照片流网格。在手机大小时，它以水平滚动方式显示以查看图像

我的问题是，是否可以通过媒体查询将特定id或类作为目标？逻辑告诉我是，但生活告诉我不是

例如：

HTML

这在我目前的组织中是可能的吗？ 我知道我可以将其设置为：

`<div class="photogrid">
<img>
<img>
<img>
<img>
<img>
<img>
</div>
<div id="photoscroll">
<img>
<img>
<img>
<img>
<img>
<img>
</div>`

并且以这种格式有单独的MediaQuery，但我试图避免图像必须加载两次。也许是错误的想法？我没有那么有经验

---

任何帮助都是感激的，如果这是一个明显的答案，我道歉，谷歌没有帮助

是的，你可以同时瞄准类和ID。媒体查询的工作原理与任何其他CSS相同，只是它会查看您的屏幕大小/设备等。如果您的HTML布局和CSS正确，则无需加载两次。@putvande谢谢！我现在就来做这个。

`<div class="photogrid">
<img>
<img>
<img>
<img>
<img>
<img>
</div>
<div id="photoscroll">
<img>
<img>
<img>
<img>
<img>
<img>
</div>`