这些媒体查询为什么不能相互覆盖？

Question

我在我的样式表中设置了以下媒体查询，cna有人告诉我为什么底部查询不会覆盖第一个查询？

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

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

Answer 1

尝试@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>

Answer 2

你以错误的顺序写的媒体查询，唯一的（或“不是”）应该“@media”之后到来。 这样的问题：

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

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