html - 在WordPress子主题中覆盖父CSS的媒体查询

Question

我想创建一个响应式 WordPress 主题的子主题。父主题的 css 定义了一些媒体查询，例如:

@media screen and (max-width: 1000px) { /* a bunch of changes */ }

现在假设我希望断点位于 900 像素而不是 1000 像素。有什么方法可以轻松地在我的子主题的 css 中覆盖它吗？

Answer 1

JoshC 绝对正确。

可能你不理解这个想法 - 媒体查询不是像 CSS 中的某种规则。这是更全面的理解。

比方说:

您的主题中有媒体查询

@media screen and (max-width: 1000px) { #main{color:#000;} }

您将 ID main 的 div 设置为文本颜色 BLACK，但前提是最大浏览器宽度不大于 1000px - (最大宽度:1000px)

无论您在何处使用此查询 - 它都会以相同的方式工作。

你需要指定的是里面的东西，例如用于以下更重要的用途:

@media screen and (max-width: 1000px) { #main{color:#000 !important;} }