Медиа-запросы - между двумя ширинами

Я пытаюсь использовать медиа-запросы CSS3 для создания класса, который появляется только тогда, когда ширина превышает 400 пикселей и меньше 900 пикселей. Я знаю, что это, наверное, очень просто, и мне не хватает чего-то очевидного, но я не могу понять это. То, что я придумал, - это код ниже, оцените любую помощь.

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

Ответ 1

Вам нужно переключить свои значения:

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

Демо: http://jsfiddle.net/xf6gA/ (используя цвет фона, поэтому его легче подтвердить)

Ответ 2

@Jonathan Sampson Я думаю, что ваше решение неверно, если вы используете несколько @media.

Вы должны использовать (сначала min-width):

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

Ответ 3

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