将媒体查询放在CSS文件中的位置

Question

我想问一下，我们是否必须将Media查询放在原始CSS样式之后？

如果我把媒体查询放在原始样式之前，那是行不通的。

media screen and (max-width: 760px){
    #logo_bar img#logo_image {
        display: block;
        margin: 5px auto 0px auto;
        background-color: #c0c0c0;
        float: none;
    }

    #logo_bar form.search_wrapper{
        width: 65%;
        margin: 15px auto 0px auto;
        padding: 0px 0px 0px 0px;
        float: none;
    }
}

#logo_bar img#logo_image {
    width: 218px;
    height: 78px;
    margin-top: 33px;
    background-color: #c0c0c0;
    float: left;
}

#logo_bar form.search_wrapper{
    width: 55%;
    height: 30px;
    margin-top: 58px;
    float: right;
    padding: 0px 0px 0px 0px;
}

但是，如果我将媒体查询放在原始样式之后，它将起作用并更改样式。

#logo_bar img#logo_image {
    width: 218px;
    height: 78px;
    margin-top: 33px;
    background-color: #c0c0c0;
    float: left;
}

#logo_bar form.search_wrapper{
    width: 55%;
    height: 30px;
    margin-top: 58px;
    float: right;
    padding: 0px 0px 0px 0px;
}

media screen and (max-width: 760px){
    #logo_bar img#logo_image {
        display: block;
        margin: 5px auto 0px auto;
        background-color: #c0c0c0;
        float: none;
    }

    #logo_bar form.search_wrapper{
        width: 65%;
        margin: 15px auto 0px auto;
        padding: 0px 0px 0px 0px;
        float: none;
    }
}

Answer 1

是。CSS 级联是有原因的- 当它看到重复的分配时，它将采用您在文件中指定的最新样式和最新样式。

比较这两个小提琴：首先是媒体查询与最后是媒体查询。对于第一个示例，调整窗口大小不会改变div其达到600px时的颜色，而第二个则适应于宽度。

还要注意，优先级取决于选择器的具体程度-即id选择器优先于class选择器样式。

最后，您的媒体查询应从@标准开始：例如@media screen and (max-width: 760px)。