奇怪的媒體查詢 - 沒有應用

我有一堆的查詢設置，但是，我意識到他們沒有一個真正的工作。於是我開始逐個測試它們。 1217.css適用於大於1201px的任何內容。 1200.css適用於任何高達1200px的文件，而600.css適用於高達600px寬度的文件。現在，當我重新調整窗口大小時，我看到從1200.css到1217.css的更改。但是，當我將窗口寬度降低到600px時，沒有任何反應。就好像現在沒有這樣的風格; 1200.css仍然適用於低於1200像素的任何內容。爲什麼不應用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; 
}

來源

2014-03-01 user1830833

這是因爲當你定義max-width：1200px時，那個CSS覆蓋了max-width：600px CSS。所以，與其最大寬度：1200像素給（最小寬度：601px & &最大寬度：1200像素）

這601-1200px

來源

2014-03-01 18:29:10 mechanicals

好的，謝謝。這使得3種風格適用。但我的問題是，爲什麼瀏覽器不使用像這樣的邏輯：好吧，寬度是550px - >使用600.css;好的，寬度是601px - >使用1200.css。我的思想在哪裏有缺陷？ – user1830833

因爲當你給max-width：1200px時，它還包括你給max-width：600px的屏幕尺寸。因此，它會覆蓋。 – mechanicals

之間正常工作的寬度可能需要改變鏈接加價順序爲：

<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覆蓋規則？相同選擇器的相同屬性將選擇最後一個作爲第一優先級。

來源

2014-03-03 05:18:12

奇怪的媒體查詢 - 沒有應用

回答

相關問題