Question

好的，我在尝试使用媒体查询时遇到了问题。我想知道你是否有人可以在这个问题上帮助我。这段代码的目的很简单。当屏幕尺寸高于600px时，横幅不应该可见，当屏幕尺寸低于600px时，横幅应该出现。

＆＃13;

@media (max-width: 600px) {
  .banner {
    display: none;
  }
}

＆＃13;

<header class="banner">
  <h1>Banner</h1>
  <p>Banner Content</p>
</header>

＆＃13;

现在，当您运行上面的代码时（我假设您刚才这样做）没有任何错误。

好的，现在我将添加类似的代码。

＆＃13;

@media (max-width: 600px) {
  .banner {
    display: none;
  }
}
.banner {
  display: block;
}

＆＃13;

<header class="banner">
  <h1>Banner</h1>
  <p>Banner Content</p>
</header>

＆＃13;

在查询之外是一种与媒体查询中给出的样式相矛盾的样式。现在我相信了解媒体查询。只要满足屏幕大小条件，查询中的样式就应该覆盖任何其他现有样式。

如果这是正常的，那么在媒体查询中使用该样式的最佳方式是覆盖查询之外的其他现有样式。

Answer 1

（假设所有其他条件相同）样式按照它们遇到的优先顺序激活，除非包含在IF查询中，例如媒体查询。

.banner {
  display: block;
}

因此，无论其他IF语句出现在规则本身之前，上述CSS都将始终显示。这不是你想要的。

解决方案：

1）您需要将其封装在自己的媒体查询中，以便仅在 ABOVE 600px时显示：

@media (min-width: 601px) {
  .banner {
    display: block;
  }
}

2）您以相反的顺序放置所有媒体查询，因此所有的底部（最后在中）都是您的CSS文件，因此媒体限定符在标准规则之后阅读。

修改

正如Sean在评论中的资格一样，有各种更具体的CSS选择，而不仅仅是文件中的出现顺序，可以使哪些规则先于其他规则。在这种情况下，外观的顺序是有效的，并且当主题规则全部相等时（例如仅所有直接类），但是请注意，将存在可能使问题复杂化的其他CSS规则实例。此答案不适用于更复杂的CSS规则排序。

Answer 2

这取决于规则的顺序：媒体查询中的规则（对于相同的类或ID）之后出现的每个规则都将覆盖它。

在你的情况下，＆＃34;将军＆＃34; .banner的规则在媒体查询之下/之后，因此它会覆盖媒体查询中的规则。您必须首先编写一般规则，然后是媒体查询。

媒体查询问题

2 个答案: