Quali sono le regole per la sovrapposizione delle query multimediali CSS?
Cascata.
@mediale regole sono trasparenti alla cascata, quindi quando due o più @mediaregole corrispondono allo stesso tempo, il browser dovrebbe applicare gli stili a tutte le regole che corrispondono e risolvere la cascata di conseguenza. 1
Cosa succederà, su tutti i browser di supporto, esattamente a 20em e 45em?
Con una larghezza di esattamente 20em, la prima e la seconda media query corrisponderanno. I browser applicheranno gli stili in entrambe le @mediaregole e si sovrapporranno di conseguenza, quindi se ci sono regole in conflitto che devono essere sovrascritte, vince l'ultima dichiarata (tenendo conto di selettori specifici !important, ecc.). Allo stesso modo per la seconda e la terza media query quando il viewport è largo esattamente 45em.
Considerando il codice di esempio, con alcune regole di stile effettive aggiunte:
@media (max-width: 20em) {
.sidebar { display: none; }
}
@media (min-width: 20em) and (max-width: 45em) {
.sidebar { display: block; float: left; }
}
Quando il viewport del browser è largo esattamente 20em, entrambe queste media query restituiranno true. Dalla cascata, display: blocksovrascrive display: nonee float: leftsi applicherà a qualsiasi elemento con la classe .sidebar.
Puoi pensarlo come l'applicazione di regole come se le query multimediali non fossero lì per cominciare:
.sidebar { display: none; }
.sidebar { display: block; float: left; }
Un altro esempio di come avviene la cascata quando un browser corrisponde a due o più media query può essere trovato in quest'altra risposta .
Tieni presente, tuttavia, che se hai dichiarazioni che non si sovrappongono in entrambe le @mediaregole, verranno applicate tutte quelle regole. Quello che succede qui è un'unione delle dichiarazioni in entrambe le @mediaregole, non solo il secondo che annulla completamente il primo ... il che ci porta alla tua domanda precedente:
Come distanziamo accuratamente le media query per evitare sovrapposizioni?
Se desideri evitare la sovrapposizione, devi semplicemente scrivere query multimediali che si escludono a vicenda.
Ricorda che i prefissi min-e max-significano "minimo compreso" e "massimo compreso"; questo significa (min-width: 20em)e (max-width: 20em)corrisponderanno entrambi a un viewport largo esattamente 20em.
Sembra che tu abbia già un esempio, che ci porta alla tua ultima domanda:
Ho visto persone usare: cose come 799px e poi 800px, ma che dire di una larghezza dello schermo di 799,5 px? (Ovviamente non su un display normale, ma su uno retina?)
Questo non ne sono del tutto sicuro; tutti i valori di pixel in CSS sono pixel logici e ho avuto difficoltà a trovare un browser che segnalasse un valore di pixel frazionario per una larghezza di visualizzazione. Ho provato a sperimentare con alcuni iframe ma non sono riuscito a trovare nulla.
Dai miei esperimenti sembrerebbe che Safari su iOS arrotondi tutti i valori dei pixel frazionari per garantire che uno dei due max-width: 799pxe min-width: 800pxcorrisponderà, anche se il viewport è in realtà 799,5 px (che apparentemente corrisponde al primo).
1 Sebbene niente di tutto ciò sia esplicitamente dichiarato nel modulo Regole condizionali o nel modulo Cascade (l'ultimo dei quali è attualmente previsto per una riscrittura), è implicito che la cascata avvenga normalmente, poiché la specifica dice semplicemente di applicare gli stili in qualsiasi e tutte le @mediaregole che corrispondono al browser o al supporto.