Media query

Le media query sono una funzionalità di CSS che consente al contenuto delle pagine web di adattarsi a diverse dimensioni e risoluzioni dello schermo. Sono una parte fondamentale del responsive web design e vengono utilizzate per personalizzare l'aspetto dei siti web su più dispositivi.

Le media query possono essere inserite nell'HTML di una pagina web oppure incluse in un file .CSS separato a cui fa riferimento la pagina web. Di seguito è riportato un esempio di media query semplice:

@media screen and (max-width: 768px)
{
  header { height: 70px; }
  article { font-size: 14px; }
  img { max-width: 480px; }
}

La media query precedente si attiva se la finestra del browser dell'utente è larga 768 pixel o meno. Questo può accadere se si riduce la finestra su un computer desktop o se si utilizza un dispositivo mobile, come un tablet, per visualizzare la pagina web.

Nel responsive web design, le media query funzionano come filtri per diverse dimensioni dello schermo. Come tutti i moduli all'interno di un foglio di stile a cascata, quelle che compaiono più in basso nell'elenco sostituiscono quelle sopra di esse. Pertanto, gli stili predefiniti vengono in genere definiti per primi all'interno di un documento CSS, seguiti dalle media query per le diverse dimensioni dello schermo. Ad esempio, gli stili per computer desktop possono essere definiti per primi, seguiti da una media query con stili per gli utenti di tablet e poi da una media query progettata per gli utenti di smartphone. Gli stili possono anche essere definiti nell'ordine opposto, secondo un approccio di sviluppo chiamato "mobile first".

Sebbene min-width sia di gran lunga la funzionalità più utilizzata nelle media query, ne sono disponibili anche molte altre. Tra gli esempi vi sono min-device-width, min-device-height, aspect-ratio, max-color-index, max-resolution, orientation e resolution. Il valore resolution, ad esempio, può essere utilizzato per rilevare gli schermi HiDPI, come gli schermi Retina, e caricare elementi grafici ad alta risoluzione invece delle immagini standard.