50%宽度盒子的响应式设计

时间:2014-09-07 16:03:37

标签: html css

我有两个框,每个框都有width: 50%;,并与float放在一起。一个是白色背景,另一个是灰色背景。

随着页面宽度缩小,盒子彼此相邻。在某个最小尺寸,我不希望盒子变小。在这里,他们应该互相跳下去。

他们做得很好。但是白色和灰色的盒子保持50%的宽度 - 此时它们应该完全填满整个宽度100%。

The issue is seen here就在视频下方。

(此时最小宽度在这里没有任何区别,只是在页面上设置为某个任意值(100px)。)

这种响应效果的正确方法是什么,因此产品在小屏幕上是全尺寸的,但可以在大屏幕上相互站立?

2 个答案:

答案 0 :(得分:1)

我发现通过移动优先设置更容易解决这个问题。将框设置为100%宽度,直到您希望它们开始形成列的断点。例如,如果您希望它们开始以600px设备宽度和更大的值形成列:

.column_selector {
    box-sizing: border-box;
    width: 100%;
}
@media all and (min-device-width: 600px) {

    .column_selector {
        width: 50%;
    }
}

此外,如果您要使用百分比作为宽度,我建议您使用box-sizing: border-box来计算宽度计算中的填充。

答案 1 :(得分:1)

使用@media为不同的窗口尺寸设置一些特殊规则。类似的东西:

.div1 {
    float: left;
    width: 50%;
}

.div2 {
    float: left;
    width: 50%;
}

@media (max-width: 600px) {
    .div1 {
        width: 100%;
    }

    .div2 {
        width: 100%;
    }
}

这是fiddle