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

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