爲什麼媒體查詢的順序在CSS中很重要？

最近，我一直在設計更具響應性的網站，並且我經常使用CSS媒體查詢。我注意到的一種模式是，媒體查詢的定義順序實際上很重要。我沒有在每個瀏覽器中進行測試，只是在Chrome上進行測試。有沒有解釋這種行爲？有時，當您的網站無法正常工作時，它會變得令人沮喪，並且您不確定它是否是查詢或寫入查詢的順序。爲什麼媒體查詢的順序在CSS中很重要？

下面是一個例子：

HTML

<body> 
    <div class="one"><h1>Welcome to my website</h1></div> 
    <div class="two"><a href="#">Contact us</a></div> 
</body>

CSS：

body{ 
font-size:1em; /* 16px */ 
} 

.two{margin-top:2em;} 



/* Media Queries */ 

@media (max-width: 480px) { 
    .body{font-size: 0.938em;} 

} 
/* iphone */ 
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    body {font-size: 0.938em;} 
} 
/*if greater than 1280x800*/ 
@media (min-width: 1200px) { 
     .two{margin-top:8em;} 
      } 
/*1024x600*/ 
@media (max-height: 600px) { 
     .two{margin-top:4em;} 
} 
/*1920x1024*/ 
@media (min-height: 1020px) { 
     .two{margin-top:9em;} 
} 
/*1366x768*/ 
@media (min-height: 750px) and (max-height: 770px) { 
     .two{margin-top:7em;} 
}

但是，如果我在最後寫的查詢爲1024x600，瀏覽器會忽略它並應用CSS開始處指定的邊距值（margin-top：2em）。

/* Media Queries - Re-arranged version */ 

@media (max-width: 480px) { 
    .body{font-size: 0.938em;} 
} 
/* iphone */ 
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    body {font-size: 0.938em;} 
} 
/*if greater than 1280x800*/ 
@media (min-width: 1200px) { 
     .two{margin-top:8em;} 
} 
/*1920x1024*/ 
@media (min-height: 1020px) { 
     .two{margin-top:9em;} 
} 
/*1366x768*/ 
@media (min-height: 750px) and (max-height: 770px) { 
     .two{margin-top:7em;} 
} 
/*1024x600*/ 
@media (max-height: 600px) { 
     .two{margin-top:4em;} 
}

如果我對媒體查詢的理解是正確的，順序應該不重要，但看起來確實如此。可能是什麼原因？

來源

2012-01-09 dsignr

這是CSS設計 - 層疊樣式表。

這意味着，如果你申請的是碰撞到同一個元素的兩個規則，它會選擇被宣佈爲最後一個，除非第一個具有!important標記或更具體的（如html > body VS只是body中，後者不太具體）。

因此，鑑於此CSS

@media (max-width: 600px) { 
    body { 
    background: red; 
    } 
} 

@media (max-width: 400px) { 
    body { 
    background: blue; 
    } 
}

如果瀏覽器窗口是350個像素寬，背景是藍色，而與此CSS

@media (max-width: 400px) { 
    body { 
    background: blue; 
    } 
} 

@media (max-width: 600px) { 
    body { 
    background: red; 
    } 
}

和相同的窗口寬度，背景將是紅色的。兩個規則確實匹配，但第二個規則是應用的規則，因爲這是最後一條規則。

最後，

@media (max-width: 400px) { 
    body { 
    background: blue !important; 
    } 
} 

@media (max-width: 600px) { 
    body { 
    background: red; 
    } 
}

或

@media (max-width: 400px) { 
    html > body { 
    background: blue; 
    } 
} 

@media (max-width: 600px) { 
    body { 
    background: red; 
    } 
}

背景是藍色（具有350個像素寬窗口）。

來源

2012-01-09 16:58:46

謝謝。我從來沒有想到，這樣一個簡單的邏輯會一起毀了我的睡眠。謝謝。 – dsignr 2012-01-09 18:30:34

如果在沒有任何媒體查詢的情況下應用相同的規則，然後在小屏幕移動設備的媒體查詢中應用相同的規則，並且有一些圖像需要下載，則在樣式表中。那麼會發生什麼事情呢，瀏覽器會在沒有媒體查詢的情況下忽略規則，並只應用特定的媒體查詢規則？ – 2017-03-11 18:41:18

或者您可以將最小寬度添加到更大的媒體查詢中，並且不會有任何問題，而不管順序如何。

@media (min-width: 400.1px) and (max-width: 600px) { 
 
    body { 
 
    background: red; 
 
    } 
 
} 
 

 
@media (max-width: 400px) { 
 
    body { 
 
    background: blue; 
 
    } 
 
}

使用該代碼，以任何順序，所述背景顏色將總是紅色與400.1px-600px的寬度的分辨率，並且將始終是藍色用於與寬度分辨率400px或更少。

來源

2014-11-06 15:58:26

不錯！謝謝。 – dsignr 2015-09-14 04:28:19

我在CSS中看到了像400.1px這樣的值。或1023像素，1025像素等 – Monstieur 2018-01-17 11:49:46

爲什麼媒體查詢的順序在CSS中很重要？

回答

相關問題