html - 结合最小宽度和最大宽度

Question

我希望div1仅在窗口宽度小于800px时出现，我希望div2仅在窗口宽度大于800px时出现。我的解决方案是使用以下有效的 CSS。但是，有没有办法只使用一个 @media 命令来做到这一点？不得不写两个条件似乎很笨拙，一个用于 max-width，一个用于 min-width。

@media screen and (max-width: 800px) {
  #div1 {
    display: block;
  }
  #div2 {
    display: none;
  }
}

@media screen and (min-width: 800px) {
  #div1 {
    display: none;
  }
  #div2 {
    display: block;
  }
}

<div id="div1">
  DIV1
</div>

<div id="div2">
  DIV2
</div>

Answer 1

从媒体查询中取出一个。

#div1 {
  display: none;
}
#div2 {
  display: block;
}
@media screen and (max-width: 800px) {
  #div1 {
    display: block;
  }
  #div2 {
    display: none;
  }
}

<div id="div1">
  DIV1
</div>
<div id="div2">
  DIV2
</div>

或者

#div1 {
  display: block;
}
#div2 {
  display: none;
}
@media screen and (min-width: 800px) {
  #div1 {
    display: none;
  }
  #div2 {
    display: block;
  }
}

<div id="div1">
  DIV1
</div>
<div id="div2">
  DIV2
</div>