html - 媒体查询改变自己？

Question

我设置了一个媒体查询来更改我的#secondary wrapper 的属性

这是我设置的媒体查询

@media screen and (max-width: 767px) {
.left-sidebar #secondary {
    float: right;
    width: 100%!important;
}

问题是它直到 479px 才应用这些更改，即使我将它设置为 676px；

当我在谷歌的开发工具中查看 css 时，它看起来像这样

@media (max-width: 479px)
@media screen and (max-width: 767px)
.left-sidebar #secondary {
    float: right;
    width: 100%!important;
}

为什么会发生这种情况，我该如何解决？

Answer 1

您的问题似乎是媒体查询缺少大括号。我通常发现缩进媒体查询中的所有内容很有帮助，这样就不会意外发生。

@media screen and (max-width: 767px) {
    .left-sidebar #secondary {
        float: right;
        width: 100% !important;
    }
}

代替

@media screen and (max-width: 767px) {
    .left-sidebar #secondary {
        float: right;
        width: 100%!important;
    }