响应式元素 - 拉伸然后堆叠答案

【问题标题】：Responsive elements - stretching and then stacking响应式元素 - 拉伸然后堆叠
【发布时间】：2015-08-13 11:57:42
【问题描述】：

我对响应式网页设计还很陌生，所以不要把我打得太惨。

我目前有一个 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 像素以下时最终堆叠在一起。

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

例如，对于 480 像素宽的图片：

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

【问题讨论】：

看看 Twitter Bootstrap 或 Foundation 或任何网格系统，网上有很多。并检查媒体查询教程；）
我熟悉一个与 Bootstrap 非常相似的系统（有 12 个网格），但据我了解，您仅限于 12 种不同的尺寸，无法选择自定义大小。
使用 Twitter Bootstrap，您可以自定义列的数量和大小。 Look here

标签： html css responsive-design

【解决方案1】：

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

需要注意的几点：

边距不好，请改用填充和包装器
浮点数不好，请改用 inline-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>

【讨论】：