响应元素 - 拉伸，然后堆叠

我是相当新的回应式网页设计，所以不要打我还算可以。响应元素 - 拉伸，然后堆叠

我有一个当前固定宽度的画廊页是1000像素宽。 1000px的外部div在每对图像之间有30px的填充和30px。所以我为每一对都有910px的空间可用。该页面可能是这样的：

（30像素间距）（500像素图片）（30像素间距）（410px图）（30像素间距）
（30像素间距）（480像素图片）（30像素间距）（430px图）（ 30PX间距）
（30像素间距）（450像素IMG）（30像素间距）（440px图像）（30像素间隔）
...等。

我想将其转换为一个负责任的网页，使图像缩小为浏览器窗口缩小，并最终在彼此叠放一旦浏览器窗口中低于640像素。

我知道只有这样，才能使这个640像素的变化是一个样式表中。这是我能做到这一点的唯一方法吗？我将不得不在样式表中为每个图像定义样式吗？

例如，对于一个480x70宽的图像：

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

来源

2015-05-30 user1472100

看看Twitter的Bootstrap或基金会或任何网格系统，网上有很多。并检查媒体查询教程;） – Fredmat

我熟悉一个系统，非常类似Bootstrap（与12个网格），但据我所知，你被限制为十二个不同的大小，不能选择自定义大小。 – user1472100

使用Twitter Bootstrap，您可以自定义列的数量和大小。 [看这里]（http://getbootstrap.com/customize/） – Fredmat

这里是你要求与响应式设计的影响的例子。

几件事情要注意：

利润率是坏的，使用填充和包装，而不是
彩车是坏的，使用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>

来源

2015-05-30 18:37:30

响应元素 - 拉伸，然后堆叠

回答

相关问题