Consultas de medios: entre dos anchos

141

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

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

Respuestas:

269

Necesita cambiar sus 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)

Sampson
fuente
44
max-widthy min-widthdebe ser revertido. de esta manera es más legible
machineaddict
33

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

Debe usar ( ancho mínimo primero ):

@media screen and (min-width:400px) and (max-width:900px){
   ...
}
WalkerNuss
fuente
10
La respuesta aceptada no es incorrecta de ninguna manera, pero creo que usar min-width a max-width es una convención más clara y legible.
Dave Powers
1
De acuerdo con @DavePowers. En mi caso, tenía mi consulta de medios formateada como @WalkerNuss, pero había olvidado la primera anddespués @media screen. Insertar el primero andsolucionó esto para mí.
Kyle Vassella
4

solo quería dejar mi .scssejemplo aquí, creo que es una buena práctica, especialmente si haces la personalización, ¡es bueno establecer el ancho solo una vez! No es inteligente aplicarlo en todas partes, aumentará el factor humano exponencialmente.

Estoy esperando sus comentarios!

// 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;
   }
}
JasParkety
fuente
Si usó los parámetros en la mezcla, puede ser una "función" ...
1984
3 

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

Charlie
fuente