css - div - Consultas de medios: entre dos anchos

title attribute anchor tag

Question

Intento utilizar las consultas de medios de CSS3 para crear una clase que solo aparece cuando el ancho es mayor a 400px y menor a 900px. Sé que esto es probablemente extremadamente simple y me falta algo obvio, pero no puedo resolverlo. Lo que se me ocurrió es el siguiente código, agradezco cualquier ayuda.

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

Answer 1

@Jonathan Sampson, creo que su solución es incorrecta si usa múltiples @media .

Deberías usar ( min-width primero ):

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

Answer 2

Debes cambiar tus valores:

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

Demostración: http://jsfiddle.net/xf6gA/ (usando el color de fondo, por lo que es más fácil de confirmar)

Answer 3

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