html - 响应式元素——拉伸(stretch)再堆叠

Question

我是响应式网页设计的新手，所以不要责备我。

我有一个当前固定宽度的图库页面，宽度为 1000 像素。 1000px 的外部 div 在每对图像之间有 30px 的填充和 30px。所以我有 910px 的空间可用于每对。该页面可能如下所示:

(30px 间距)(500px img)(30px 间距)(410px 图片)(30px 间距)
(30px 间距)(480px img)(30px 间距)(430px 图片)(30px 间距)
(30px 间距)(450px img)(30px 间距)(440px 图片)(30px 间距)
...等

我想将其转换为响应式页面，以便图像随着浏览器窗口缩小而缩小，并最终在浏览器窗口降至 640 像素以下时堆叠在彼此之上。

我知道进行此 640px 更改的唯一方法是在样式表中。这是我能做到的唯一方法吗？我是否必须在样式表中为每个图像定义样式？

例如，对于 480 像素宽的图像:

img.img480 {
width: 48%;
float: left;
}
@media screen and (max-width: 640px) {
img.img480 {
width: 100%;
max-width: 480px;
float: none;
}
}

Answer 1

这是您要求的响应式设计效果的示例。

有几点需要注意:

• 边距不好，改用填充和包装器
• float 不好，改用内联 block

( Demo )

html, body {
    margin: 0;
}
.wrapper {
    padding: 0 15px;
    font-size: 0;
}
.img-wrp {
    width: 50%;
    padding: 0 15px;
    display: inline-block;
    box-sizing: border-box;
}
.img-wrp img {
    width: 100%;
}
@media screen and (max-width: 640px) {
    .img-wrp {
        width: 100%;
    }
}

<div class="wrapper">
    <i class="img-wrp"><img src="//lorempixel.com/640/480" /></i>
    <i class="img-wrp"><img src="//lorempixel.com/640/480" /></i>
</div>