Combinare più media query

La parola chiave and richiede che tutte le condizioni siano vere contemporaneamente. È utile per selezionare insieme dimensioni e tipi specifici di dispositivi.

La combinazione di min-width e max-width con and seleziona un intervallo specifico di larghezze del viewport (stili solo per tablet):

Le query separate da virgole funzionano come OR: gli stili vengono applicati se una QUALSIASI query corrisponde:

not nega un'intera media query. Deve essere utilizzato con attenzione: si applica all'intera espressione della query, non solo alla prima condizione.

Le media query moderne di livello 4 consentono di usare not() come funzione sulle singole funzionalità:

La parola chiave only veniva utilizzata per nascondere le media query ai browser legacy che non supportavano le media feature. I browser moderni la ignorano, ma è innocua.

Con il nesting CSS nativo, le media query possono essere scritte all'interno dei blocchi dei selettori:

Per selezionare specificamente i dispositivi mobili (schermo piccolo e alta densità di pixel):

Più media feature per gli stili di stampa applicati solo alle stampanti a colori:

Le media query possono essere applicate al momento dell'importazione per caricare condizionalmente interi fogli di stile (tuttavia bloccano il rendering e devono essere utilizzate con moderazione):

Come regola generale, le query più semplici sono più facili da gestire. Eviti di concatenare troppe condizioni. Quando una query diventa complessa, valuti di ristrutturare l'approccio CSS invece della query.

and richiede che tutte le condizioni siano vere. Le virgole funzionano come OR tra le query. not nega un'intera query. Combini min-width e max-width per selezionare un intervallo. Il CSS moderno supporta il nesting delle media query all'interno dei blocchi dei selettori e la sintassi degli intervalli per espressioni più chiare.