Stuck——用于响应式设计的图像网格布局和媒体查询

Question

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

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

现在，网格中的每个图像都设置在一个 div 中作为一个标签。然后我使用 CSS 来定义带有背景属性的图像。

<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，您的图像都会相应地缩放。您只会为自己节省一些工作量。

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