CSS媒體查詢重疊的規則是什麼？

例如，如果我們考慮代碼：

@media (max-width: 20em) { 
    /* for narrow viewport */ 
} 

@media (min-width: 20em) and (max-width: 45em) { 
    /* slightly wider viewport */ 
} 

@media (min-width: 45em) { 
    /* everything else */ 
}

會發生什麼事，在所有支持的瀏覽器，正好20em，和45em？

我見過有人用過：像799px和800px之類的東西，但是屏幕寬度爲799.5像素呢？（顯然不是一個普通顯示器，但視網膜上的一個？）

我最好奇這裏的答案考慮規範。

來源

2012-11-05 Baumr

你目前的問題標題似乎不符合你的要求。這似乎是你的問題內容的第一行會更適合作爲標題:) – BoltClock

@BoltClock，一如既往的感謝 - 我將它們轉換;但你是如何解釋「隔開媒體查詢」的？ – Baumr

guess @media（...）小於或等於，大於或等於。你最好使用最大寬度的像素 – 2012-11-28 17:40:37

CSS媒體查詢重疊的規則是什麼？

級聯。

@media規則對級聯是透明的，所以當兩個或多個規則同時匹配時，瀏覽器應該在所有匹配的規則中應用樣式，並相應地解析級聯。

在所有支持的瀏覽器中，精確到20em和45em會發生什麼？

正好20em寬，您的第一個和第二個媒體查詢都會匹配。瀏覽器將在@media規則中應用樣式並相應地進行級聯，因此如果有任何需要覆蓋的衝突規則，則最後聲明的規則將勝出（計入特定選擇器，!important等）。同樣，對於第二個和第三個媒體查詢，當視口正好是45em寬。

考慮您的示例代碼，用一些實際的樣式規則補充說：

@media (max-width: 20em) { 
    .sidebar { display: none; } 
} 

@media (min-width: 20em) and (max-width: 45em) { 
    .sidebar { display: block; float: left; } 
}

當瀏覽器窗口正好是20em寬，這兩個媒體查詢將返回true。通過級聯，display: block覆蓋display: none和float: left將應用於類.sidebar的任何元素。

你可以把它看作是適用的規則，如果媒體查詢不在那裏開始：

.sidebar { display: none; } 
.sidebar { display: block; float: left; }

的級聯如何發生時，瀏覽器兩個或兩個以上媒體查詢匹配的另一個例子被發現在this other answer。

但是，請注意，如果您在@media規則中有不是重疊的聲明，則所有這些規則將適用。這裏發生的是工會在@media規則的聲明，不只是後者完全否定前...這將我們帶到您先前的問題：

我們如何精確隔離媒體查詢以避免重疊？

如果您希望避免重疊，您只需編寫互斥的媒體查詢。請注意，min-和max-前綴的含義是「最小包含」和「最大包含」;這意味着(min-width: 20em)和(max-width: 20em)都將匹配一個恰好爲20em寬的視口。

看起來你已經有一個例子，它給我們帶來了最後一個問題：

我見過的人使用：之類的東西799px，然後800像素，但對於799.5像素的屏幕寬度？（顯然不是正規的顯示屏，而是一個視網膜顯示屏？）

這個我不完全確定; CSS中的所有像素值都是邏輯像素，並且我一直很難找到一個能夠報告視口寬度的小數像素值的瀏覽器。我嘗試過使用一些iframe，但一直沒有能夠拿出任何東西。

從我的實驗來看，iOS上的Safari將所有分數像素值舍入以確保max-width: 799px和min-width: 800px中的任何一個匹配，即使視口真的是799.5px（顯然與前者匹配）。

_{雖然沒有這在明確陳述任Conditional Rules module或Cascade module（後者這是目前定於重寫的），級聯是隱含發生正常的，因爲該規範簡單地說，在任何和全部@media規則中應用樣式來匹配瀏覽器或媒體。}

來源

2012-11-28 18:01:35 BoltClock

完成和撒粉，謝謝BoltClock！ – Baumr

@Baumr：沒問題，雖然我還沒有完成 - 我錯過了關於重疊媒體查詢的問題。我已經更新了我的答案，並且因此我稱它爲一個晚上。哦，只是爲了踢：媒體查詢是我最喜歡的CSS主題之一，但我不能忍受術語RWD;） – BoltClock

BoltClock，它可能是我第一次實際使用「RWD」 - 你的冷接待已注意到，哈哈！晚安，但是當你回來時，請查看我對原始問題的更新。現在來看看你的更新...... – Baumr

calc()可用於解決此問題(min-width: 50em and max-width: calc(50em - 1px)將正確堆疊），但瀏覽器支持不佳，我不會推薦它。

@media (min-width: 20em) and (max-width: calc(45em - 1px)) { 
    /* slightly wider viewport */ 
}

相關信息：

有些人提到，不使用em單位在查詢中堆積會有所幫助。

來源

2012-12-12 19:12:36

'calc（）'不是媒體查詢規範的一部分，並且不起作用。 –

CSS媒體查詢重疊的規則是什麼？

回答

相關問題