在哪裏把媒體查詢在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文件

回答

相關問題