CSS媒體查詢大屏幕覆蓋媒體查詢小屏幕

我正在使我的新開發網站移動響應的過程中，但我注意到一些奇怪的行爲，這讓我有點瘋了。希望有人能夠指出我在這裏做錯了什麼。當我以小分辨率進行測試時，比如320px寬度，720px寬度的規則也被應用，並且由於它們在級聯中較低，因此優先考慮。我一直在用一個小規模查詢中的！重要聲明來抵消這個，但我知道這是不正確的。CSS媒體查詢大屏幕覆蓋媒體查詢小屏幕

我的實際CSS太大而無法包含，但這裏有一個我所看到的例子。如果我有大平板電腦/小型臺式機側兩個div的一面，但希望他們能夠在另一個上面全寬，一個在電話：

@media screen and (max-width:479px){ 
    div{width:100%} 
} 
@media screen and (max-width:1159px) and (min-width:980px){ 
    div{width:49%;float:left} 
    div:first-child{margin-right:2%} 
}

當我通過479px寬度檢查320像素爲980的規則-1159被加載，我必須使用！重要聲明以及將float設置爲none和margin設置爲0.爲什麼會發生這種情況並且我做錯了什麼？

來源

2016-01-15 Bestrafung

我假設都是錯的是事物的順序：

的相反：

@media screen and (max-width:1159px) and (min-width:980px){

我把它改爲：

@media screen and (min-width:980px) and (max-width:1159px){

而且它似乎是工作正常。調整的結果平方，看看是否是你在找什麼：

https://jsfiddle.net/wyyqLmg6/1/

來源

2016-01-15 01:09:38

出於某種原因，調整結果窗口對我不起作用。我做了一個短暫的想法，認爲這可能是一個問題，但我已經嘗試了這兩種方式，它仍然加載相同。這是Wordpress模板的一部分，我想知道是否有可能讓某個插件或腳本影響媒體查詢順序，但這不應該是正確的？我也試着將較大的分辨率查詢移動到頂端，所以小分辨率查詢優先，但這隻消除了！重要聲明的需要，我仍然必須清空或重置不需要的值。 – Bestrafung

嗨，因爲預覽區域可能不會超過980像素寬，我只是爲了測試目的而將其改爲480。你能檢查它是否適用於你？ https://jsfiddle.net/wyyqLmg6/1/ –

CSS媒體查詢大屏幕覆蓋媒體查詢小屏幕

回答

相關問題