我正在制作一个＆＃39;画廊＆＃39;侧面项目的部分，我试图根据屏幕尺寸完成不同的显示图像的方法。 在桌面和平板电脑尺寸下，它将显示为网格，类似于vsco.grid或苹果照片流网格。在手机大小时，它以水平滚动显示以查看图像。
我的问题是可以使用媒体查询定位特定的ID或类吗？逻辑告诉我是的，但生活告诉我没有。
示例：
HTML
`<div class="photogrid" id="photoscroll">
<img>
<img>
<img>
<img>
<img>
<img>
</div>`
这对我现在的组织来说是否可行？ 我知道我可以将它们设置为：
`<div class="photogrid">
<img>
<img>
<img>
<img>
<img>
<img>
</div>
<div id="photoscroll">
<img>
<img>
<img>
<img>
<img>
<img>
</div>`
并且具有该格式的单独媒体查询，但我试图避免图像必须加载两次。 （错误的想法可能？我不是那么有经验。）
任何帮助表示赞赏，如果这是一个明显的答案，我道歉，谷歌没有帮助。