使用媒体查询切换nth-child

Question

我使用nth-child得到以下简单网格：

.grid section {
  float: left;
  width: 32%;
  background: #ccc;
  margin: 0 2% 2% 0;
}
.grid section:nth-child(3n+3) {
  margin: 0 0 2% 0;
}
@media screen and (max-width: 600px) {
   .grid section {
    width: 48%;
    margin: 0 2% 2% 0;
  }
  .grid section:nth-child(3n+3) {
    margin: auto;
  }
  .grid section:nth-child(even) {
    margin: 0 0 2% 0;
  }
}

<div class="grid">

  <section class="box">
    <p>I'm a box</p>
  </section>

  <section class="box">
    <p>I'm a box</p>
  </section>

  <section class="box">
    <p>I'm a box</p>
  </section>

  <section class="box">
    <p>I'm a box</p>
  </section>

  <section class="box">
    <p>I'm a box</p>
  </section>

  <section class="box">
    <p>I'm a box</p>
  </section>

</div>

在代码的桌面版本上，网格连续显示3个框。

当屏幕尺寸达到600px时，它会连续下降到2个盒子。有没有办法可以在媒体查询中关闭nth-child(3n+3)？

Answer 1

你想要这样的东西吗？

＆＃13;

＆＃13;

.grid section {
  float: left;
  width: 32%;
  background: #ccc;
  margin: 0 2% 2% 0;
}
.grid section:nth-child(3n+3) {
  margin: 0 0 2% 0;
}
@media screen and (max-width: 600px) {
   .grid section {
    width: 48%;
    margin: 0 2% 2% 0;
  }
  .grid section:nth-child(3n+3) {
    margin: 0 2% 2% 0;
  }
  .grid section:nth-child(even) {
    margin: 0 0 2% 0;
  }
}

＆＃13;

<div class="grid">

  <section class="box">
    <p>I'm a box</p>
  </section>

  <section class="box">
    <p>I'm a box</p>
  </section>

  <section class="box">
    <p>I'm a box</p>
  </section>

  <section class="box">
    <p>I'm a box</p>
  </section>

  <section class="box">
    <p>I'm a box</p>
  </section>

  <section class="box">
    <p>I'm a box</p>
  </section>

</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

只需在查询中添加nth-child规则即可在600px以上的屏幕上显示

像这样：

@media screen and (min-width: 600px) {
  .grid section:nth-child(3n+3) {
    margin: 0 0 2% 0;
  }
}