媒體查詢正在改變？

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