Css在屏幕缩小时创建全宽div

how to let the divs in the code below take 100% width when the screen size is reduced. on reducing the screen size, id="two" is floated to the next line leaving a gap on the right side of the page.

当屏幕尺寸减小时，如何让下面代码中的div占用100％的宽度。在减小屏幕尺寸时，id =“two”浮动到下一行，在页面右侧留下间隙。

<div id="one"></div>
<div id="two"></div>

<style>
#one, #two {
border: 1px solid;
min-width: 400px;
max-width: 100%;
height: 200px;
float: left;
}
</style>

1 个解决方案

#1

You should use a media query to set the divs width to 100% till a specific break point.

您应该使用媒体查询将divs宽度设置为100％，直到特定的断点。

#one,
#two {
  border: 1px solid;
  min-width: 400px;
  max-width: 100%;
  height: 200px;
  float: left;
}
@media (max-width: 800px) {
  #one,
  #two {
    width: 100%;
  }
}

<div id="one"></div>
<div id="two"></div>

Reference: MDN - CSS media queries

参考：MDN - CSS媒体查询

#1