我想在我的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>
评论前必须登录!
注册