媒体查询正在改变？

Question

我设定一个媒体查询，以改变我的#secondary包装

的性质这是媒体查询我设置

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

的问题是它不是应用这些更改，直到479px即使我将其设置为676px ;

当我看到在开发工具在谷歌以查看它看起来像这样

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

为什么会这样发生的CSS和如何解决它？

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