Le media query sono funzionalità native del CSS che permettono, in base a determinate condizioni, di sovrascrivere una parte del CSS stesso. Sono anche, sfortunatamente, famose per la loro difficoltà di comprensione: a volte la dichiarazione potrebbe risultare così verbosa da essere di difficile interpretazione. In seguito riportiamo due esempi, il primo molto intuitivo, il secondo, utilizzando come metodo di confronto la min-width e max-width richiede più attenzione per comprenderne il campo di azione.

@media (max-width: 100em) { ... }

@media (min-width: 100em) and (max-width: 200em) { ... }

Va detto che, anche nel secondo caso, la complessità di interpretazione è bassa, ma ci è utile per capire quanto, attraverso delle funzionalità di Livello 4, possiamo semplificarne la comprensione.

Il Livello 4 è un insieme di funzionalità, successivo al Livello 3. Nel Livello 3 sono inserite tutte le specifiche riguardanti media query che interagiscono con valori di width, height, orientation, resolution; con il Livello 4 vediamo l'introduzione di operatori come and, or, not e operatori di range <, >.

Sono proprio questi ultimi a permetterci di riscrivere il codice mostrato poco fa in una modalità molto più diretta, meno verbosa e comprensibile.

@media (width <= 100em) { ... }

@media (100em <= width <= 200em ) { ... }