[英]Trouble mixing min width and max width media queries?
I am trying to mix both min width and max width media queries like so: 我正在尝试混合最小宽度和最大宽度媒体查询,如下所示:
@media only screen and (max-width: 768px) {
.navibar li a {
font-size: 8px !important;
}
}
@media only screen and (max-width: 1300px) {
.navibar li a {
font-size: 2px !important;
}
}
@media only screen and (min-width: 1301px) {
.navibar li a {
font-size: 1rem !important;
}
}
When hitting the 1300px the font size changes to 2px, but never hits the 768px media query. 当达到1300px时,字体大小将更改为2px,但绝不会达到768px的媒体查询。 Why is this? 为什么是这样?
I think why not? 我想为什么不呢? You specific the .navibar li a
when max-width: 1300px
is 2px, so form 0 to 1300px, they will have that value = 2px. 当max-width: 1300px
为2px时,您可以指定.navibar li a
,因此从0到1300px,它们的值将为2px。
And since you write the rule of max-width: 1300px
after the rule of max-width: 768px
, so it always be 2px too even if you have less than 768px width. 并且由于您在max-width: 768px
的规则之后编写了max-width: 1300px
的规则,因此即使宽度小于max-width: 768px
,也总是2px。 You should relocate the rule of max-width: 768px
after the 1300 one and it will work just fine. 您应该将max-width: 768px
规则重新定位max-width: 768px
在1300个规则之后为max-width: 768px
,它将正常工作。
And a side note, try not use !important
in your code, it a bad practice. 另外,请不要在代码中使用!important
,这是一个不好的做法。 Find other way(s) to override the rule(s), !important
should only use to override inline style, which is a bad practice too if you write style like that. 找到其他方法来覆盖规则, !important
仅应用于覆盖内联样式,如果您编写这样的样式,这也是一个不好的做法。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.