Question

我想问一下，我们是否必须在原始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 cascading有一个原因 - 当它看到重复的分配时，它会采用您在文件中指定的最新和最后样式。

比较这两个小提琴：media query first与 media query last 。调整第一个示例的窗口大小不会更改div达到600px时的颜色，而第二个示例会适应宽度。

另请注意，根据选择器的具体情况确定优先级 - 即id选择器优先于class选择器样式。

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

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

1 个答案: