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

时间:2013-04-25 23:13:15

标签: html css image responsive-design media-queries

我是第一次手工编码的网站(主要是印刷设计师)。我正在尝试只使用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中使用标签。

我的问题是,我是否采取了错误的方式?我对于放置图像的位置有点困惑,以便我可以使用媒体查询修改布局。提前感谢任何建议。干杯!

1 个答案:

答案 0 :(得分:0)

这对我来说非常好。

我要做的唯一事情就是在HTML中的<img>内添加<a>标记的图片,然后将它们全部放在同一个类中,而不是全部放入单独通过CSS,当您为响应式布局定义媒体查询时,您只需修改该级别的widthheight,您的图像将相应地进行缩放。你只需要节省一些工作。

我希望这个比较清楚。 :)