CSS：仅在特定媒体查询中应用规则？

Question

以下情况...

/* @media screen and (min-width: 480px) */ 
@media screen and (min-width: 30em) { 
    #el { background:red; } 
} 

/* @media screen and (min-width: 640px) */ 
@media screen and (min-width: 40em) { 
    #el { background:none; } 
} 

所以如果视口小于480像素#el小应该是红色的，如果视口较宽它应该应用没有背景色！

是否有一些css技巧只适用于min-width: 30em这个规则，所以我不必在下一个媒体查询中“重置”它？

想法和想法呢？ 提前谢谢！

Answer 1

尝试以这种方式

@media screen and (min-width: 30em) and (max-width: 40em) { 
    #el { background:red; } 
} 

例如小提琴：http://jsfiddle.net/2ySNu/

Answer 2

如果你想为#e1背景，以低于某个转折点是红色的，你应该使用max-width。如果您想为视口创建大于特定断点的样式规则 - 那么您应该使用min-width。在你的例子中：@media screen and (min-width: 30em)，只有当视口大于30em时，背景才会变红 - 一旦达到40em，它将恢复为无（基于你的其他规则）。为了设置小于480像素的视口背景，只需使用max-width即可，您甚至不必担心“重置”，因为一旦视口超过480像素，该规则将不适用。

/* @media screen and (max-width: 480px) */ 
@media screen and (max-width: 30em) { 
    #el { background:red; } 
} 

记住，你在min-width声明的规则将适用于具有宽度大于你指定断点宽度视口。而在max-width中声明的规则将应用于小于/小于断点宽度的视口。