我是第一次在网站上手工编码(主要是打印设计师)。我试图只使用 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 本身中使用标记。
我的问题是，我这样做的方式有误吗？我对将图像放在哪里感到有点困惑，以便我可以使用媒体查询修改布局。在此先感谢您的任何建议。干杯!
最佳答案
这对我来说绝对没问题。
在您的情况下，我唯一要做的就是添加带有 <img> 的图像。 <a> 内的标签在您的 HTML 中并为它们提供相同的类，而不是通过 CSS 将它们全部单独放入，因为当您为响应式布局定义媒体查询时，您只需修改 width和 height对于那一类，你的图像都会相应地缩放。您只会为自己节省一些工作。
我希望这是相对清楚的。 :)
关于html - Stuck--响应式设计的图像网格布局和媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/16226239/