Question

我想在我的wordpress子主题中覆盖媒体查询。它目前设置为最大宽度：1024px，但我希望它触发远远少于700px。问题是如果我设置700px的新媒体查询，是的700px媒体查询被激活，但它不会覆盖最大宽度：1024px，这个仍然被确认。如果我想覆盖最大宽度大于1024px然后就没有问题了，但随着我变小，我怎么告诉它忽略父主题中的1024px媒体查询＆＃39; s css？

我不想编辑父主题，因为我将失去对更新的更改。已经查看了其他主题如下：

Overriding media queries of parent css in wordpress child-theme

但它没有回答这个问题。

Answer 1

将为@media (max-width: 1024px)设置的规则复制到子样式表文件。
将媒体查询重写为@media (min-width: 700px) and (max-width: 1024px)
现在，在重写样式后，在child style.css中使用自定义规则@media (max-width: 700px)。

/* Style.css rewritten */

@media (min-width: 700px) and (max-width: 1024px) {
  .color {
    color: lightblue;
    transform: translateY(50px);
  }
}
/* Child.css */

@media (max-width: 700px) {
  .color {
    color: red;
  }
}

<div class="color">I can change my color and position only after 700px and before 1024px</div>

如何覆盖子主题中的媒体查询？

1 个答案: