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

Question

​

​

我很困惑，因为如果宽度小于748 is，就应该隐藏徽标。然而，所有尺寸低于960px宽度的显示的标志。

我在这里错过了什么？

Answer 1

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

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

如果您的屏幕是400 is宽，那么两个媒体查询都将匹配条件。在这种情况下，稍后声明的媒体查询块将获胜。

解决方案：

排序您的最大宽度规则下降(更大的宽度第一)。

或使用互斥媒体查询块，如以下所示：

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