Media query: tra due larghezze

141

Sto cercando di utilizzare le query multimediali CSS3 per creare una classe che appare solo quando la larghezza è maggiore di 400px e inferiore a 900px. So che questo è probabilmente estremamente semplice e mi manca qualcosa di ovvio, ma non riesco a capirlo. Quello che ho escogitato è il seguente codice, apprezzo qualsiasi aiuto.

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

css media-queries

— russellsayshi
fonte

270

Devi cambiare i tuoi valori:

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

Demo: http://jsfiddle.net/xf6gA/ (usando il colore di sfondo, quindi è più facile confermare)

— Sampson
fonte

4

max-widthe min-widthdovrebbe essere invertito. in questo modo è più leggibile

— machineaddict

33

@Jonathan Sampson penso che la tua soluzione sia sbagliata se usi più @media .

Dovresti usare ( prima la larghezza minima ):

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

— WalkerNuss
fonte

10

La risposta accettata non è affatto sbagliata, ma penso che l'uso di min-width a max-width sia una convenzione più chiara e leggibile.

— Dave Powers il

1

Accetto w / @DavePowers. Nel mio caso, la mia query multimediale era formattata come @WalkerNuss, ma avevo dimenticato il primo anddopo @media screen. Inserendo il primo andrisolto questo per me.

— Kyle Vassella,

4

volevo solo lasciare il mio .scssesempio qui, penso che sia un po 'una buona pratica, specialmente se fai personalizzazione è bello impostare la larghezza solo una volta! Non è intelligente applicarlo ovunque, aumenterai esponenzialmente il fattore umano.

Non vedo l'ora per il tuo feedback!

// 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
fonte

Se hai utilizzato i parametri nel mixin potrebbe essere una "funzione" ...

— 1984,

3

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

Espandi frammento

— Charlie
fonte