這些媒體查詢爲什麼不能相互覆蓋？

-1

我在我的樣式表中設置了以下媒體查詢，cna有人告訴我爲什麼底部查詢不會覆蓋第一個查詢？這些媒體查詢爲什麼不能相互覆蓋？

@media screen only and (max-width:992px) { 
    .some-element {float:left;} 
} 

@media screen only and (max-width:768px) { 
    .some-element {float:none;} 
}

來源

2015-07-20 user1199795

您的意思是「只有屏幕」而不是「僅屏幕」？ – BoltClock

@BoltClock OP的意思是浮動：沒有不重寫爲浮動：留在768px –

而我建議這可能是因爲代碼說「僅屏幕」，這是不正確的，並且阻止任一規則在第一位工作。 – BoltClock

嘗試@media screen而不是@media screen only。底部查詢確實會覆蓋頂部的查詢。

@media screen and (max-width:992px) { 
 
    .some-element { 
 
     float:left; 
 
     background-color: #f00; 
 
    } 
 
} 
 
@media screen and (max-width:768px) { 
 
    .some-element { 
 
     /** See how the background-color property is overriden */ 
 
     background-color: #000; 
 
     color: #fff; 
 
    } 
 
}

<div class="some-element">Hi. I am floating.</div> 
 

 
<h1>I am a block element</h1>

來源

2015-07-20 10:25:18

你以錯誤的順序寫的媒體查詢，唯一的（或「不是」）應該「@media」之後到來。這樣的問題：

@media only screen and (max-width:992px) { 
    .some-element {float:left;} 
} 

@media only screen and (max-width:768px) { 
    .some-element {float:none;} 
}

來源

2015-07-20 10:37:29

我猜'唯一'只意味着屏幕媒體，即不打印等？ – user1199795

是的。它意味着只有屏幕媒體類型。「不」意味着除了除外。 –

這些媒體查詢爲什麼不能相互覆蓋？

回答

相關問題