媒体查询-在两个宽度之间

提问者：小点点

我正在尝试使用CSS3媒体查询来制作一个只在宽度大于400px小于900px时才出现的类。我知道这很可能是极其简单的和我正在错过一些明显的东西，但我无法弄明白。我想出的是下面的代码，感谢任何帮助。

@media (max-width:400px) and (min-width:900px) {
    .class {
        display: none;
    }
}

共2个答案

匿名用户

您需要切换您的值：

/* No greater than 900px, no less than 400px */
@media (max-width:900px) and (min-width:400px) {
    .foo {
        display:none;
    }
}

演示:http://jsfidle.net/xf6ga/（使用背景色，这样更容易确认）

匿名用户

如果你使用多个介质，我认为你的解决方案是错误的。

您应该使用（最小宽度优先）：

@media screen and (min-width:400px) and (max-width:900px){
   ...
}