javascript - 响应式网格问题

Question

我正在处理此处描述的任务 - Flexible Grid

任务是创建一个随窗口大小变化而变化的 1X4 网格。

如果窗口大小小于 720px 那么它应该变成 2X2 网格。 如果窗口大小小于 360px，那么它应该变成 4X1 网格。

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  padding: 5px;
}

.test {
  border: 1px solid #000;
  border-bottom: 0;
  border-right: 0;
  border-collapse: collapse;
}

.test .test__col {
  display: table-cell;
  width: 100%;
  min-height: 100px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

@media screen and (min-width: 360px) {
  .test .test__col {
    float: left;
    width: 100%;
  }
}

@media screen and (min-width: 720px) {
  .test .test__col {
    width: 50%;
  }
}

<div class="test">
  <div class="test__col"></div>
  <div class="test__col"></div>
  <div class="test__col"></div>
  <div class="test__col"></div>
</div>

如果我在我的 Mozilla 浏览器中将尺寸设置为 768X1024 和 360X640，代码可以正常工作。如果我将其更改为 320X480，则无法加载 4X1 尺寸。我在输出中看到以下内容。

我该如何解决这个问题？

Answer 1

这是使用 flexbox 布局的替代方案。

问题是您需要在媒体查询中使用 max 并更正顺序。 360px 需要在末尾删除 720px 因为两者在 360px 下都有效(当然这不是唯一的方法组织媒体查询，但我认为这是最简单的)

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  padding: 5px;
}

.test {
  border: 1px solid #000;
  border-bottom: 0;
  border-right: 0;
  border-collapse: collapse;
  display:flex;
  flex-wrap:wrap;
}

.test .test__col {
  flex:1;
  min-height: 100px;
  border-bottom: 1px solid #000;
  border-right: 1px solid #000;
}

@media screen and (max-width: 720px) {
  .test .test__col {
    flex:0 0 50%;
  }
}

@media screen and (max-width: 360px) {
  .test .test__col {
    flex:0 0 100%;
  }
}

<div class="test">
  <div class="test__col"></div>
  <div class="test__col"></div>
  <div class="test__col"></div>
  <div class="test__col"></div>
</div>