Question

我有一个简单的响应式网页，可以在两列中运行，每个div的css为

.half {
  width: 45%;
  min-width: 300px;
  float: left;
}

对于宽屏幕，每个div列的宽度减半，对于较窄的屏幕，列压缩直到达到300px，然后它们会换行。基本上工作正常。

但是，当屏幕宽度为400px时（比方说），列仍然会被压缩到300px。（因为400px的一半是200px，所以最小宽度为300px优先。但在这种情况下，我希望它是完整的400px，因为右边没有其他列。）

有没有一种简单的方法可以阻止它？

有新的灵活方案选项，但我需要在公共网络，大量浏览器和手机上运行。抛光更新，适合老年人的东西是可以的。我不想仅仅为了这个而添加JavaScript。

我认为答案很简单，不可能。但我很感激确认我没有错过任何东西。

（已经有很多类似的问题，但我没有找到具体解决这个简单案例的问题。）

（编辑以解决评论中的混淆。）

Answer 1

我假设您希望在窗口小于特定宽度时实现media-query来指定新规则。因此，您可以执行以下操作：

// Override styles for elements once the element is less than a specified width
@media only screen and (max-width: 400px) {
    // If window is less than 400px, apply new styles. ie: width takes full width
    .half {              
         width: 100%;
    }
}

一旦设备/窗口为400px或更低，这将使.half类的宽度达到100％。

misterManSam提供的media-query示例：JS Bin

Answer 2

根据我的理解，你需要这样：

.half {
  width: 100%;
  min-width: 300px;
  max-width: 500px;/*define max-width as you wish*/
  float: left;
}

响应式布局具有最小宽度，宽度％，没有简单的方法来避免间隙？

2 个答案: