我对响应式网页设计还是比较陌生的,所以不要打得太厉害。
我有一个宽度为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;
}
}
答案 0 :(得分:0)
以下是响应式设计所要求的效果示例。
有几点需要注意:
(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>