仅使用CSS调整大小并重新定位DIVS？

Question

好的，我已经很好地调整了使用媒体查询的设备。现在我需要在浏览器调整大小上重现这一点。是否可以只使用CSS？我试图避免多个命名div的可扩展性（即添加另一个更改最小宽度等，它仍然可以工作）

是的，之前可能已经提出过这个问题（我真的已经被追捕了），但是问题的解决方法有很多......请放纵我。

带有视口的媒体查询将div转换为特定大小的列。

但是在浏览器调整大小时我该如何做呢？

如果您通过Chrome检查等在设备上查看此结果，我的观点将非常明确。

全部谢谢！

#Page {
  margin: 0 auto 20px;
  width: 98%;
  /*1000px*/
  background-color: lightgray;
}
#content {
  margin: 0 auto 10%;
  width: 96%;
  background-color: green;
  max-width: 1100px;
}
.col_content {
  float: left;
  margin: auto 1%;
  width: 30%;
  background-color: pink;
  min-width: 225px;
}
@media only screen and (max-device-width: 768px) {
  #Page {
    background-color: white;
  }
  #content {
    max-width: 400px;
    background-color: green;
  }
  .col_content {
    float: none;
    margin: 1%;
    /*5px*/
    width: 100%;
    background-color: pink;
  }
}

<div id="content">
  <!--Content-->

  <div class="col_content">
    1
  </div>
  <!--end col_content-->

  <div class="col_content">
    2
  </div>
  <!--end col_content-->

  <div class="col_content">
    3
  </div>
  <!--end col_content-->

</div>
<!--end content-->

Answer 1

尝试更改：

@media only screen and (max-device-width: 768px) {

到

@media screen and (max-width: 768px) {

我在我的网站上使用上述内容，它适用于浏览器调整大小和设备。