當多個 CSS 媒體查詢重疊時會發生什麼？

媒體查詢重疊：級聯稱霸

當多個媒體查詢匹配相同的視口大小時會發生什麼？答案就在於 CSS 的核心原則：級聯和重疊規則。

級聯實際操作

@media 規則就像常規 CSS 規則一樣遵循級聯。當多個 @media 規則相符時，將套用所有符合樣式，並且級聯會解決任何衝突。換句話說，最後聲明的、最具體的樣式規則獲勝。

斷點處重疊

恰好在20em 和45em 處，您的第一個和第二個媒體查詢，以及您的第二個和第三個媒體查詢將分別配對。瀏覽器套用這兩個規則中的樣式並相應地級聯。如果存在衝突的聲明，則最後聲明的規則優先。

細分範例

考慮以下程式碼：

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

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

At 20em寬，兩個媒體查詢都符合。級聯覆蓋 display: none 和 display: block，float: left 適用於具有 .sidebar 類別的元素。

透過互斥避免重疊

防止重疊，確保您的媒體查詢是互斥的。請記住，最小和最大表示包容性。 (min-width: 20em) 和 (max-width: 20em) 都符合 20em 寬的視口。

分數像素值

CSS 中的像素值是邏輯像素。我無法找到報告視窗寬度分數像素值的瀏覽器。 iOS 上的 Safari 會對小數值進行捨入，以確保 (max-width: 799px) 或 (min-width: 800px) 至少符合一條規則，即使視窗為 799.5px。

以上是當多個 CSS 媒體查詢重疊時會發生什麼？的詳細內容。更多資訊請關注PHP中文網其他相關文章！