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

我想在我的wordpress子主题中覆盖媒体查询。目前设置为最大宽度：1024像素, 但我希望它以远小于700像素的速度触发。问题是, 如果我将一个新的媒体查询设置为700px, 是的, 则激活了700px媒体查询, 但它不会覆盖max-width：1024px, 这一点仍在确认中。如果我想使用大于1024px的最大宽度进行覆盖, 那么就没有问题, 但是随着尺寸的减小, 我如何告诉它忽略父主题css中的1024px媒体查询？

我不想编辑父主题, 因为更新会丢失更改。看过其他这样的线程：

在Wordpress子主题中覆盖父CSS的媒体查询

但这并不能回答问题。

#1

将为@media(最大宽度：1024像素)设置的规则复制到子样式表文件。
将媒体查询重写为@media(最小宽度：700像素)和(最大宽度：1024像素)
现在, 在重写样式后, 在子style.css中使用自定义规则@media(最大宽度：700像素)。

/* 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>

来源：

https://www.srcmini02.com/67125.html

#1

猜你喜欢