javascript - CSS 媒体查询不适用于 chrome 和 Mozilla 中预期的特定范围，并且未在其他浏览器中测试

Question

下面的示例查询未按预期工作，我在 chrome(v74.0.3729.169(官方版本)(64 位))和 Mozilla(v66.0.2(64 位))浏览器中进行了测试。

@media screen and (max-width: 1199px) and (min-width: 992px) {
  div.example {
    border: 8px solid black;
    background: yellow;
  }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
  div.example {
    border: 8px solid black;
    background: red;
  }
}

@media screen and (max-width: 767px) and (min-width: 480px) {
  div.example {
    border: 8px solid black;
    background: green;
  }
}

为了解释的目的，我将采取下面的一个

@media screen and (max-width: 767px) and (min-width: 480px) {
  div.example {
    border: 8px solid black;
    background: green;
  }
}

以上媒体查询请看下面的截图:

不适用于 767px

适用于 766px

在上面的媒体查询中，我的 div.example 选择器没有在 767px 屏幕尺寸下设置样式，而是在 767px 屏幕尺寸下设置样式。

一般来说，上面的 css 片段应该适用于 767px 和小于 767px 到 480px & above 480px 屏幕尺寸。

但是，上面的 css 片段在 小于 767px 到 480px 和大于 480px 屏幕尺寸下工作。

类似下面的查询也没有按预期工作

@media screen and (max-width: 1199px) and (min-width: 992px) {
  div.example {
    border: 8px solid black;
    background: yellow;
  }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
  div.example {
    border: 8px solid black;
    background: red;
  }
}

最后，我只是手动查找哪些屏幕尺寸范围没有按预期工作，然后找到这些范围 981 到 991、1181 到 1199、761 到 767。

下面的 css 媒体查询按预期工作但使用不同的断点。

@media screen and (max-width: 1200px) and (min-width: 993px) {
  div.example {
    border: 8px solid black;
    background: yellow;
  }
}

@media screen and (max-width: 992px) and (min-width: 769px) {
  div.example {
    border: 8px solid black;
    background: red;
  }
}

@media screen and (max-width: 768px) and (min-width: 480px) {
  div.example {
    border: 8px solid black;
    background: green;
  }
}

为特定媒体断点链接工作 - https://codepen.io/rag7s/pen/PvrREx

不适用于特定媒体断点链接 - https://codepen.io/rag7s/pen/pmXLpv

Answer 1

现在检查

@media (max-width: 1199px) {
    div.example {
        border: 8px solid black;
        background: yellow;
    }
}

@media (max-width: 991px) {
    div.example {
        border: 8px solid black;
        background: red;
    }
}

@media (max-width: 767px) {
    div.example {
        border: 8px solid black;
        background: green;
    }
}

https://codepen.io/anon/pen/zQVaxy