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间距）
...等

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

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

例如，对于480px宽的图像：

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

Answer 1

以下是响应式设计所要求的效果示例。

有几点需要注意：

边距不好，请改用填充和包装
浮动很糟糕，改为使用内联块

（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>

响应元素 - 拉伸然后堆叠

1 个答案: