1

以下情况……  

/* @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因此我不必在下一个媒体查询中“重置”它？

对此有什么想法和想法？先感谢您！

4

2 回答 2

4

以这种方式尝试

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

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

于 2012-06-14T07:52:19.117 回答
0

如果您希望背景#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将适用于小于/小于断点宽度的视口。

于 2012-06-15T01:00:19.440 回答