当页面宽度在css中更改时如何调整列大小？

Question

在下面的示例中，当页面宽度为＆gt; 300px，两列跨越页面的整个宽度，但是，当页面大小减小到300px以下时，一列无法填充整个页面。如何更改它以使一列适合整个页面？

html {
box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.cols {
  width:50%;
  min-width:300px;
  float:left;
  background-color: yellow;
  padding: 10px 10px 10px 10px;
  border: 2px solid black;
}

<div class="cols">
</div>

<div class="cols">
</div>

Answer 1

您可以使用@media (max-width: 620px)更改CSS。
查看我的示例。
文档：https://developer.mozilla.org/en-US/docs/Web/CSS/@media

＆＃13;

＆＃13;

html {
box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

.cols {
  width:50%;
  min-width:300px;
  float:left;
  background-color: yellow;
  padding: 10px 10px 10px 10px;
  border: 2px solid black;
}

@media (max-width: 620px) {
.cols {
  width:100%;
  min-width:100%;
}
}

＆＃13;

<div class="cols">
</div>

<div class="cols">
</div>

＆＃13;

＆＃13;

＆＃13;