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

我正在尝试使用CSS3媒体查询来创build一个只在宽度大于400像素且小于900像素时出现的类。 我知道这可能是非常简单的，我错过了一些明显的东西，但我无法弄清楚。 我想到的是下面的代码，感谢任何帮助。

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

Answer 1

您需要切换您的值：

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

演示： http : //jsfiddle.net/xf6gA/ （使用背景颜色，所以更容易确认）

Answer 2

@Jonathan Sampson我认为你的解决scheme是错误的，如果你使用多个@media 。

你应该使用（ 最小宽度第一 ）：

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

Answer 3

 .class { display: none; } @media (min-width:400px) and (max-width:900px) { .class { display: block; /* just an example display property */ } }