个性化阅读
专注于IT技术分析

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

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

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

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

但这并不能回答问题。


#1


  1. 将为@media(最大宽度:1024像素)设置的规则复制到子样式表文件。
  2. 将媒体查询重写为@media(最小宽度:700像素)和(最大宽度:1024像素)
  3. 现在, 在重写样式后, 在子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>
赞(0)
未经允许不得转载:srcmini » 如何覆盖子主题中的媒体查询?

评论 抢沙发

评论前必须登录!