卡住-图像网格布局和媒体查询以进行响应式设计

Question

我是第一次在网站上手工编码（主要是印刷设计师）。 我试图只使用HTML和CSS，因为我没有时间深入研究任何Javascript，我真的很想了解我在使用什么。 因此，我的主要内容设置在一个图像网格中，所有图像均相同大小，宽3列。

我想将媒体查询用于具有不同浏览器/设备尺寸的响应式设计。 最好的理解是，您为加载的同一HTML布局创建不同的CSS文件，具体取决于设备/浏览器的大小。

现在，网格中的每个图像都在div内设置为标签。 然后，我使用CSS使用background属性定义图像。

<div id="main-content">
    <div id="project-1">
        <a id="image-1" href="URL here"></a>
    </div>
    <div id="project-2">
        <a id="image-2" href="URL here"></a>
    </div>
    ...etc.

#image-1 {
    background: url(image.png) no-repeat;
    width: x;
    height: y;
}

...etc.

经过一些研究，听起来这不是一个好的解决方案。 最好在HTML本身中使用标记。

我的问题是，这是我做错了吗？ 我对将图像放置在何处感到有些困惑，以便可以通过媒体查询来修改布局。 在此先感谢您的任何建议。 干杯！

Answer 1

这对我来说绝对不错。

在您的情况下，我唯一要做的就是在HTML的<a>内添加带有<img>标记的图像，并为它们提供相同的类，而不是通过CSS分别将它们分别放入您可以为响应式布局定义媒体查询，只需修改该类的width和height ，图像就会相应缩放。 您将节省一些工作。

我希望这是比较清楚的。 :)