CSS媒体最大和最小宽度

Question

我有2个div标签，根据屏幕尺寸，我只想显示其中一个标签，

但是对于特定的屏幕尺寸（在我的情况下为699px）都显示了两个，我不明白为什么。

有人知道为什么吗？

更具体地说，我不明白为什么第二个div在699px的屏幕上显示。

此外，如果我将max-width更改为698px，则第二个div不会显示为698px。

有什么想法吗？

如果有问题，我的项目将使用React v17构建

html：

<div class='first'>first</div>
<div class='second'>second</div>

css：

@media (min-width: 700px) {
  .first {
    display: none;
  }
}

@media (max-width: 699px) {
  .second{
    display: none;
  }
}

==================== 编辑

关于@Imran Rafique的答案

Answer 1

你在这里

.first, .second {
width: 100%;
background-color: red;
height: 100vh;
}

@media (min-width: 700px) {
  .first {
    display: none;
  }
}

@media (max-width: 699px) {
  .second{
    display: none;
  }
}

<div class='first'><h1>first</h1></div>
<div class='second'><h1>Second</h1></div>