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

Question

当屏幕尺寸缩小时，如何让下面代码中的 div 占 100% 宽度。在减小屏幕尺寸时，id="two" float 到下一行，在页面右侧留下一个空隙。

<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>

Answer 1

您应该使用媒体查询将 div 的宽度设置为 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>

引用:MDN - CSS media queries