在哪里把媒体查询在CSS文件

我想问一下，我们必须把原始CSS风格后的媒体查询？在哪里把媒体查询在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; 
    } 
}

来源

2014-02-25 Will

多数民众赞成喜欢，通常将它们添加在底部 - 你也可以导入它们在一个单独的文件，以保持组织有序 –

@SergioWizenfeld不，它确实很重要。见下面的答案。 –

我的不好，@AlbertXing你是对的 –

是的。 CSS是cascading是有原因的 - 当它看到重复的分配时，它会在文件中指定的最后最后和最后样式。

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

另请注意，根据选择器的具体特点，存在优先级 - 即id选择器优先于class选择器样式。

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

来源

2014-02-25 00:42:15

在哪里把媒体查询在CSS文件

回答

相关问题