媒体查询取消其他媒体查询

Question

我很困惑，因为如果宽度小于 748 像素，则应该隐藏徽标。但是，宽度小于 960 像素的所有尺寸显示徽标。

我在这里错过了什么？

Answer 1

（在屏幕截图中）我看到max-width: 768px 媒体查询被声明为之前 max-width: 960px，这是不正确的。仅使用 max-width 的媒体查询应按降序排序。让我们假设您按以下顺序声明媒体查询：

1. (max-width: 768px)
2. (max-width: 960px)

如果您的屏幕宽度为 400 像素，则两个媒体查询都将匹配条件。在这种情况下，稍后声明的媒体查询块获胜。

解决方案：

按降序排列您的最大宽度规则（首先是较大的宽度）。

或者使用互斥媒体查询块，例如：

• (min-width: 961px)
• (min-width: 769px) and (max-width: 960px)
• (max-width: 768px)

在这种情况下，顺序无关紧要。

Answer 2

试试

@media only screen and (max-width: 768px)
{
    .flicker-example {display: none !important}
}