Quali sono le regole per la sovrapposizione di query media CSS?

Question

Come distanziamo accuratamente le query multimediali per evitare sovrapposizioni?

Ad esempio, se consideriamo il codice:

@media (max-width: 20em) { 
    /* for narrow viewport */ 
} 

@media (min-width: 20em) and (max-width: 45em) { 
    /* slightly wider viewport */ 
} 

@media (min-width: 45em) { 
    /* everything else */ 
} 

cosa accadrà, in tutti i browser che supportano, esattamente 20em, e 45em?

Ho visto persone usare: cose come 799px e 800px, ma che dire di una larghezza dello schermo di 799,5 px? (Ovviamente non su un display normale, ma una retina?)

Sono più curioso di sapere la risposta qui considerando la spec.

Answer 1

Quali sono le regole per la sovrapposizione di query media CSS?

Cascata.

@media le regole sono trasparenti alla cascata, quindi quando due o più regole @media corrispondono allo stesso tempo, il browser deve applicare gli stili in tutte le regole che corrispondono e risolvere la cascata di conseguenza.

Cosa accadrà, in tutti i browser che supportano, esattamente alle 20em 45em, e?

A esattamente 20em di larghezza, la prima e la seconda query multimediale corrisponderanno entrambe. I browser applicheranno gli stili in entrambe le regole @media e in cascata di conseguenza, quindi se ci sono regole in conflitto che devono essere ignorate, l'ultima dichiarata vince (tenendo conto di selettori specifici, !important, ecc.). Allo stesso modo per la seconda e terza query multimediale quando il viewport è esattamente 45em di larghezza.

Considerando il tuo codice di esempio, con alcune regole di stile effettivi aggiunto:

@media (max-width: 20em) { 
    .sidebar { display: none; } 
} 

@media (min-width: 20em) and (max-width: 45em) { 
    .sidebar { display: block; float: left; } 
} 

Quando la finestra del browser è esattamente 20em ampia, entrambi questi media query restituirà true. In base alla cascata, display: block sostituisce display: none e float: left si applica a qualsiasi elemento con la classe .sidebar.

Si può pensare ad esso come applicare le regole come se i media query non erano lì per cominciare:

.sidebar { display: none; } 
.sidebar { display: block; float: left; } 

Un altro esempio di come la cascata avviene quando un browser corrisponde a due o più media query può essere trovato in this other answer.

Attenzione, però, che se si dispone di dichiarazioni che non sovrapposizione in entrambi @media regole, allora tutte quelle regole devono essere applicate. Quello che succede qui è un unione delle dichiarazioni in entrambe le regole @media, non solo il secondo completamente annullando il primo ...che ci porta alla tua precedente domanda:

Come si evitano accuratamente le query sui supporti per evitare sovrapposizioni?

Se si desidera evitare la sovrapposizione, è sufficiente scrivere query multimediali che si escludono a vicenda.

Ricordare che i prefissi min- e max- indicano "minimo compreso" e "massimo compreso"; questo significa che (min-width: 20em) e (max-width: 20em) corrisponderanno entrambi a un viewport che è esattamente 20em di larghezza.

Sembra che si dispone già di un esempio, che ci porta alla sua ultima domanda:

Ho visto la gente usa: le cose come 799px e poi 800px, ma per quanto riguarda la larghezza dello schermo di 799,5 px ? (Ovviamente non su un display normale, ma su retina?)

Questo non sono del tutto sicuro; tutti i valori dei pixel nei CSS sono pixel logici e mi è stato difficile trovare un browser che segnalasse un valore di pixel frazionario per una larghezza di finestra. Ho provato a sperimentare con alcuni iframe ma non sono riuscito a trovare nulla.

Da miei esperimenti sembrerebbe Safari su iOS arrotonda tutti i valori dei pixel frazionari per garantire che uno di max-width: 799px e min-width: 800px corrisponderà, anche se la finestra è davvero 799.5px (che corrisponde a quanto pare l'ex).

---

_{Sebbene nessuna di queste è esplicitamente affermato sia nel Conditional Rules module o Cascade module (l'ultima delle quali è attualmente previsto per una riscrittura), la cascata è implicito avvenire normalmente, poiché le specifiche dice semplicemente di applicare gli stili in tutte le regole @media corrispondenti al browser o al supporto.}

Answer 2

calc() può essere utilizzato per aggirare questo (min-width: 50em and max-width: calc(50em - 1px) verrà impilato correttamente), ma il supporto del browser è scarso e non lo consiglierei.

@media (min-width: 20em) and (max-width: calc(45em - 1px)) { 
    /* slightly wider viewport */ 
} 

Info:

• https://developer.mozilla.org/en-US/docs/CSS/calc
• http://caniuse.com/calc
• http://www.w3.org/TR/css3-values/#calc

Alcuni altri menzionati, non si utilizza l'unità em aiuterebbe nelle query accatastamento.