为什么我的媒体查询被忽略了？

Question

我已经使用了一个css验证器，它首先提出了一些与媒体查询有关的错误，我已经修复了这些错误（并再次使用验证器检查 - 这次带回0错误）但是它仍然无法识别浏览器中的代码。我正在使用铬。

/* MEDIA QUERIES ======================================================= MEDIA QUERIES */


@media screen and (max-width: 640px)  {

/* HEADER SLIDER */

#home-header .home-slider {
    max-width: 100%;
    margin: auto;
}

#home-header .metaslider {
max-width: 90%;
margin: auto;
}



/* USE IT  ============================ USE IT */

    .circle {
display: block;
margin: 0 auto 30px;
}


#circle-3 {
    margin-right: auto;
}

#use .logo {
    display: none;
}

#use .buy-now {
    float: none;
    margin: 0 auto; 
}

}

Answer 1

您还应确保主css文件的优先级低于媒体查询。可能只是忽略了来自媒体查询的＃home-header样式？

如果是，只需将选择器添加到例如body div所以它们看起来像body div#home-header .home-slider。使选择器更精确将使它们具有更高的优先级。