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; }
}

因此，如果视口小于480px #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，它将恢复为无（基于您的其他规则）。为了设置小于480px的视口的背景，只需使用max-width，您甚至不必担心“重置”，因为一旦视口超过480px，该规则将不适用。

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

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

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

2 个答案: