媒体查询在断点周围表现得非常奇怪

Question

我一直在尝试在CSS中创建一些响应式隐藏类，只是意识到我的@media查询在断点处的表现非常奇怪。

我想创造什么

我想创建两个具有以下功能的类：

当视口宽度小于768px 时，应隐藏
• .hidden-sm 当视口宽度大于或等于768px
时，应隐藏
• .hidden-md

到目前为止我尝试了什么

我原来的解决方案如下：

@media screen and (max-width: 767px) {
  .hidden-sm { display: none !important; }
}

@media screen and (max-width: 1279px) and (min-width: 768px) {
  .hidden-md { display: none !important; }
}

但是，此代码最终显示.hidden-sm和.hidden-md（如果您愿意，则隐藏其中任何一个）恰好为768px 。

我尝试过的另一件事是：

@media screen and (max-width: 768px) {
  .hidden-sm { display: none !important; }
}

@media screen and (max-width: 1279px) and (min-width: 768px) {
  .hidden-md { display: none !important; }
}

但是这一个最终隐藏了.hidden-sm和.hidden-md 正好是768px 。

我认为我对@media查询有相当不错的把握，但这个具体问题让我感到困惑。我希望得到一个有效的解决方案，并解释为什么这些解决方案不能按预期工作。

PS 我知道!important不是最佳做法，但我认为这对我的具体需求非常必要，这在本例中可能并不明显的

更新：无论出于什么奇怪的原因，如果我将第一段代码分别更改为768px和769px，它可以正常工作，只有断点是后面的一个像素想要的。为什么？

Answer 1

我无法真正复制您的问题，因此我以简单的格式重写了媒体查询，以检查逻辑是否有效。

我没有使用最大宽度和最小宽度，只使用一个（因为它在大多数情况下都需要）

@media(max-width: 767px){
    body {
        background-color: red;
    }
}

@media(min-width: 768px){
    body {
        background-color: green;
    }
}

也可以在此处测试 - https://jsfiddle.net/3dLyhr8c/

这可以在我的设备上运行，我只能假设您的浏览器缩放或类似问题：）