Perché l’ordine delle query sui media è importante nei CSS?

Ultimamente, ho progettato siti più reattivi e ho utilizzato frequentemente le query multimediali CSS. Un modello che ho notato è che l’ordine in cui sono definite le query multimediali è importante. Non l’ho provato in ogni singolo browser, ma solo su Chrome. C’è una spiegazione per questo comportamento? A volte diventa frustrante quando il tuo sito non funziona come dovrebbe e non sei sicuro se è la query o l’ordine in cui viene scritta la query.

Ecco un esempio:

HTML

 

Welcome to my website

CSS:

 body{ font-size:1em; /* 16px */ } .two{margin-top:2em;} /* Media Queries */ @media (max-width: 480px) { .body{font-size: 0.938em;} } /* iphone */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { body {font-size: 0.938em;} } /*if greater than 1280x800*/ @media (min-width: 1200px) { .two{margin-top:8em;} } /*1024x600*/ @media (max-height: 600px) { .two{margin-top:4em;} } /*1920x1024*/ @media (min-height: 1020px) { .two{margin-top:9em;} } /*1366x768*/ @media (min-height: 750px) and (max-height: 770px) { .two{margin-top:7em;} } 

Tuttavia, se ho scritto la query per 1024×600 nell’ultimo, il browser l’avrebbe ignorata e applicato il valore del margine specificato nell’avvio del CSS (margin-top: 2em).

 /* Media Queries - Re-arranged version */ @media (max-width: 480px) { .body{font-size: 0.938em;} } /* iphone */ @media only screen and (-webkit-min-device-pixel-ratio: 2) { body {font-size: 0.938em;} } /*if greater than 1280x800*/ @media (min-width: 1200px) { .two{margin-top:8em;} } /*1920x1024*/ @media (min-height: 1020px) { .two{margin-top:9em;} } /*1366x768*/ @media (min-height: 750px) and (max-height: 770px) { .two{margin-top:7em;} } /*1024x600*/ @media (max-height: 600px) { .two{margin-top:4em;} } 

Se la mia comprensione delle domande dei media è corretta, l’ordine non dovrebbe avere importanza, ma sembra che lo faccia. Quale potrebbe essere la ragione?

Questo è di design di CSS – Cascading Style Sheet.

Significa che se applichi due regole che si scontrano con gli stessi elementi, sceglierà l’ultimo che è stato dichiarato, a meno che il primo abbia il marcatore !important o sia più specifico (es. html > body vs solo body , quest’ultimo è meno specifico).

Quindi, dato questo CSS

 @media (max-width: 600px) { body { background: red; } } @media (max-width: 400px) { body { background: blue; } } 

se la finestra del browser è larga 350 pixel, lo sfondo sarà blu, mentre con questo CSS

 @media (max-width: 400px) { body { background: blue; } } @media (max-width: 600px) { body { background: red; } } 

e la stessa larghezza della finestra, lo sfondo sarà rosso. Entrambe le regole sono effettivamente abbinate, ma la seconda è quella che viene applicata perché è l’ultima regola.

Finalmente, con

 @media (max-width: 400px) { body { background: blue !important; } } @media (max-width: 600px) { body { background: red; } } 

o

 @media (max-width: 400px) { html > body { background: blue; } } @media (max-width: 600px) { body { background: red; } } 

lo sfondo sarà blu (con una finestra larga 350 pixel).

O potresti semplicemente aggiungere min-width alla / alle quesito / i di media più grande e non avere alcun problema, indipendentemente dall’ordine.

 @media (min-width: 400.1px) and (max-width: 600px) { body { background: red; } } @media (max-width: 400px) { body { background: blue; } }