奇怪的媒體查詢-不適用

Question

我設置了一堆查詢，但是我意識到它們都沒有真正起作用。 所以我開始一個接一個地測試它們。 1217.css適用於大於1201px的任何內容。 1200.css適用於最大1200px的像素，而600.css適用於最大600px的像素。 現在，當我調整窗口大小時，我看到從1200.css變為1217.css的變化，但是當我將窗口寬度減小到600px以下時，什么也沒有發生。 好像沒有這種風格存在。 1200.css仍適用於1200px以下的任何內容。 為什么不應用600.css樣式？

<link rel="stylesheet" type="text/css" media="only screen and (max-width: 600px) " href="600.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 1200px)" href="1200.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1201px)" href="1217.css" />

1217.css
#contentQuote {
background-color: red;
}

1200.css
#contentQuote {
background-color: #f07057;
}

600.css
#contentQuote {
background-color: blue;
}

Answer 1

這是因為當您定義最大寬度：1200px時，該CSS會覆蓋最大寬度：600px CSS。 因此，而不是max-width：1200px給（min-width：601px && max-width：1200px）

這對於601-1200px之間的寬度將正常工作

Answer 2

您可能需要將鏈接標記的順序更改為：

<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1201px)" href="1217.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 1200px)" href="1200.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 600px) " href="600.css" />

還記得CSS覆蓋規則嗎？ 同一選擇器的相同屬性將選擇最后一個作為第一優先級。