CSS media query應用中的層疊特性使用最佳實踐

世有因果知因求果發表於2015-10-28
CSS

media query是css3規範中引入的，它提供了一種responsive design的基礎機制：瀏覽器在不同size的裝置中將以不同樣式展現網頁，這就給一個網頁能夠適應不同device一種可能。在實際使用中，我常常碰到以下問題：為什麼media query的rule不起作用？很有可能和你的media query所處的位置有關，也很有可能和media query中的selector權重不

如外面的targeting到相同元素的css權重有關，比如：

@media screen and (max-width: 960px) {
    p{
       background-color:red;
     }
}
p{
    background-color: blue;
}

在上面的query程式碼中，我們希望在小於960px時，p應用一個red背景，但是由於後面有同樣權重的p選擇器定義了blue的背景，根據css的層疊特性，後面的(normal p rule)將覆蓋前面的(media queried p rule)規則，所以即使在screen為小於960px時，仍然無法應用media query中的css定義。

解決方案和最佳實踐

將media query block放到通用規則的後面

再比如，如果media query中定義的css rule權重太低，則同樣不會被適用：

<html>
<head>
    <title></title>
    <style type="text/css">
        p,.higher{
            background-color: blue;
        }

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

            p{
                background-color:red;
            }
}
    </style>
</head>
<body>
<p class="higher">testing p tag for css rule巢狀vs normal css</p>
</body>
</html>

上面的例子中，在media query中只用了一個p元素選擇器，但是由於在html中，該p又有一個class相關聯，而css定義中，也有對該class的定義。這樣即使media query的條件滿足了，但是由於權重太低，依然無法應用其規則!

解決方案和最佳實踐

media query必須目標明確，真正選中要選的元素，和外部普通css選擇器需要是完全一樣的。最好在普通的css選擇器規則之後，立即放對該選擇器設定樣式的media query規則

這個原因就是所謂層疊特性，當css被優先順序權重完全一樣的選擇器選中時，則後面的會覆蓋前面的@！！

//注意：在html中的class擺列順序由於其優先順序完全一樣，所以順序沒有關係，有關係的是其在css定義中出現的順序，後面的將覆蓋前面的rule，初學者容易搞混淆
<p class="specialred modifyblue">優先順序層疊演示</p> 
.modifyblue{
  color: blue;
}
.specialred{
  color: red;
}

 

相關文章