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

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

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

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

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

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

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

Вы должны использовать ( сначала минимальную ширину ):

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

просто хотел оставить .scssздесь свой пример, я думаю, что это своего рода лучшая практика, особенно я думаю, что если вы делаете настройку, неплохо установить ширину только один раз! Применять его везде не умно, вы увеличите человеческий фактор в геометрической прогрессии.

Жду ваших отзывов!

// Set your parameters
$widthSmall: 768px;
$widthMedium: 992px;

// Prepare your "function"
@mixin in-between {
     @media (min-width:$widthSmall) and (max-width:$widthMedium) {
        @content;
     }
}


// Apply your "function"
main {
   @include in-between {
      //Do something between two media queries
      padding-bottom: 20px;
   }
}