我有两个框,每个框都有width: 50%;
,并与float
放在一起。一个是白色背景,另一个是灰色背景。
随着页面宽度缩小,盒子彼此相邻。在某个最小尺寸,我不希望盒子变小。在这里,他们应该互相跳下去。
他们做得很好。但是白色和灰色的盒子保持50%的宽度 - 此时它们应该完全填满整个宽度100%。
The issue is seen here就在视频下方。
(此时最小宽度在这里没有任何区别,只是在页面上设置为某个任意值(100px)。)
这种响应效果的正确方法是什么,因此产品在小屏幕上是全尺寸的,但可以在大屏幕上相互站立?
答案 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。