html - Stuck--响应式设计的图像网格布局和媒体查询

Question

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

我想将媒体查询用于不同浏览器/设备尺寸的响应式设计。据我所知，您可以为同一 HTML 布局创建不同的 CSS 文件，这些文件会根据设备/浏览器的大小加载。

就像现在一样，网格中的每个图像都作为 a 标签设置在一个 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

这对我来说绝对没问题。

在您的情况下，我唯一要做的就是添加带有 <img> 的图像。 <a> 内的标签在您的 HTML 中并为它们提供相同的类，而不是通过 CSS 将它们全部单独放入，因为当您为响应式布局定义媒体查询时，您只需修改 width和 height对于那一类，你的图像都会相应地缩放。您只会为自己节省一些工作。

我希望这是相对清楚的。 :)