响应电网问题

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>