Я пытаюсь использовать медиа-запросы 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.
Вы должны использовать (сначала min-width):
@media screen and (min-width:400px) and (max-width:900px){
...
}
.class {
display: none;
}
@media (min-width:400px) and (max-width:900px) {
.class {
display: block; /* just an example display property */
}
}