麻烦混合最小宽度和最大宽度媒体查询？

Question

我正在尝试混合min width和max width媒体查询，如下所示：

@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;
  }
}

当达到1300px时，字体大小变为2px，但从未达到768px媒体查询。这是为什么？

Codepen

Answer 1

我想为什么不呢？当.navibar li a为2px时，您具体max-width: 1300px，因此从0到1300px，它们将具有该值= 2px。 并且由于您在max-width: 1300px规则之后编写max-width: 768px规则，因此即使宽度小于768px，它也总是2px。您应该在1300之后重新定位max-width: 768px的规则，它会正常工作 另外，请注意，不要在代码中使用!important，这是一种不好的做法。找到覆盖规则的其他方式，!important应该只用于覆盖内联样式，如果你写这样的样式，这也是一种不好的做法。