Css 媒体查询在断点周围的行为异常

我一直在尝试在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; }
}

但是，此代码最终会以768px的精确值显示

.hidden sm

和

.hidden md

（或者如果愿意，则不隐藏任何一个）

我试过的另一件事是：

@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

我认为我对

@媒体

查询有相当不错的理解，但这个具体问题让我感到困惑。我希望有一个有效的解决方案，以及解释为什么这些解决方案不能按预期工作

p.S.我知道

！重要提示

不是最佳实践，但我认为这对于我的特定需求是非常必要的，这在本例中可能并不明显

---

更新：无论出于什么奇怪的原因，如果我将第一段代码分别更改为

768px

和

769px

，它都会工作，只有断点在所需断点后一个像素。为什么?

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

我没有使用“最大宽度”和“最小宽度”，只是使用了一个（因为在大多数情况下，这是所有需要的）

@介质（最大宽度：767px）{
身体{
背景色：红色；
}
}
@介质（最小宽度：768px）{
身体{
背景颜色：绿色；
}
}

在第二个问题上，为什么不使用769px的最小宽度？@我想在屏幕宽度为768px时隐藏

.hidden md

。您有两个查询在争夺同一像素，在这种情况下，使第一个的最大宽度767，您将排序您的troubles@AndyHolmes这是我提供的第一个代码示例，这就是我的想法。然而，它不工作，因为上帝知道什么原因。除此之外，设置为

767px

和

768px

不起作用，但

768px

和

769px

起作用。为什么？您的第一个解决方案看起来还可以-->非常感谢您花时间来测试这一点并提供一个有效的解决方案。事实证明，这是特定于浏览器/环境的，并且媒体查询工作正常。完全没有问题，至少您现在知道：）