html - CSS 媒体最大和最小宽度

Question

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

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

有谁知道为什么？

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

此外，如果我将屏幕尺寸更改max-width为698px698 像素，则不会显示第二个 div。

任何想法为什么？

万一这很重要，我的项目是使用 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 的回答

标签： htmlcss

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>