Le Media query sono un insieme di regole CSS che permettono di modificare l'aspetto sulla base della dimensione dello schermo, orientamento, risoluzione o altri parametri. Con le specifiche di livello 4 sono stati introdotti nuovi metodi per renderne più comprensibile la stesura.

Se prendiamo in esame il codice seguente, esso applicherà la regola fintanto che la dimensione sarà minore di 300px.

@media (max-width: 300px) {
  /* ? */
}

Possiamo così riscriverla in:

@media (width <= 300px) {
  /* ? */
}

Allo stesso modo, regole più complesse possono essere convertite aumentandone la leggibilità

@media (min-width: 300px) and (max-width: 500px) {
  /* ? */
}

@media (300px <= width <= 500px) {
  /* ? */
}