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

Question

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

我在这里缺少什么？

Answer 1

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

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

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

解决方案：

将最大宽度规则降序排序（首先放大宽度）。

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

• (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}
}