Le media queries consentono di adattare un documento al dispositivo in cui viene visualizzato.

Con le media queries si può modificare le dimensioni degli elementi, la loro visibilità e posizione in base, ad esempio, alle dimensioni della finestra in cui sono visualizzati.

Nell’esempio mostrato nell’immagine, alcuni elementi sono visualizzati solo a determinate dimensioni della finestra del browser.

Le media queries: adattare il documento al dispositivo.

Le media queries: adattare il documento al dispositivo.

Per garantire la corretta applicazione delle media queries nei dispositivi mobili è necessario includere l’elemento meta viewport come illustrato nell’articolo Controllare la viewport dei dispositivi mobili.

Com’è fatta una media query

La media query è definita con la regola @media che identifica il blocco di stili css da applicare se si verifica una determinata condizione espressa da un tipo di media o da una particolare caratteristica del dispositivo.

@media { /* Regole css */ }

La parola chiave @media può essere seguita dall’indicazione del tipo di media che può assumere i valori: screen (schermo), print (stampa) e all.

@media print { /* Regole css per la stampa */}

Se il tipo di media è omesso, la regola si applica a tutti i media come nel caso in cui sia inserito all.

Oltre al tipo di media si può indicare una caratteristica con cui si cerca la corrispondenza, detta media features.  Nel seguente esempio la media features è max-width.

@media (max-width:420px) { 
  /* Regole applicate se la larghezza della finestra è inferiore a 420px */
}

Se si utilizzano più media features o se si utilizzano contemporaneamente un tipo di media e una media features si deve usare l’operatore and.

@media screen and (max-width:420px) { 
  /* Regole applicate su schermo e con la larghezza 
della finestra inferiore a 420px */
}

Le media features possono essere separate tra loro da una virgola. In questo caso la regola sarà applicata se vi è una corrispondenza con almeno una media features.

@media (max-width:420px), (orientation: portrait) { 
 /* 
  Regole applicate per una larghezza massima di 420px oppure 
con orientamento verticale 
*/
}

Da un punto di vista logico la virgola corrisponde all’operatore booleano or.

Le media features

Le media features previste dalla specifica Media Queries del W3C sono numerose. Quelle più usate per creare siti web responsive sono:

  • La larghezza/altezza della viewport
  • La modalità (verticale o orizzontale) di visualizzazione
  • La visualizzazione o meno del colore
  • La densità di pixel del dispositivo

width e height

La media features più utilizzata è width che si riferisce alla larghezza della finestra del browser, detta viewport, in cui il documento viene visualizzato.

@media screen and (width:420px) { 
/* Regole applicate se la larghezza della viewport è uguale a 420px */
}

Poiché da sola sarebbe applicata solo quando la larghezza è uguale alla misura indicata, si utilizza in genere con i prefissi min- e max- che consentono di creare dei punti di discontinuità (breakpoint) in cui modificare il layout per adattarlo a schermi più piccoli o più grandi.

@media screen and (max-width:420px) { 
  /* 
    Regole applicate fin quando la larghezza della viewport 
è minore di 420px 
  */
}

In qualche caso è utile applicare regole css quando la finestra del browser è compresa tra una misura minima e massima.

@media screen and (min-width:420px) and (max-width:768px){ 
  /* 
     Regole applicate nelle finestre con larghezza 
compresa tra 420px e 768px 
  */
}

La media features height si riferisce all’altezza della viewport e accetta i prefissi min- e max-.

Rispetto a width è meno usata perché in un dispositivo mobile l’altezza della viewport corrisponde alla sua larghezza quando cambia l’orientamento del dispositivo e perciò è in genere sufficiente utilizzare width.

device-width e device-height

Le media features device-width e device-height si riferiscono rispettivamente alla larghezza e all’altezza dello schermo del dispositivo nel quale il documento viene visualizzato.

Anche in questo caso si possono usare i prefissi min- e max-.

@media screen and (min-device-width: 800px) { … }

Le media features device-width e device-height sono utili con i dispositivi che visualizzano le finestre del browser solo a schermo intero, come i dispositivi mobili, ma diventano inefficaci con i computer tradizionali, in cui l’utente può ridimensionare la finestra.

orientation

Per applicare regole diverse in base all’orientamento del dispositivo si può usare orientation che accetta i valori portrait (orientamento verticale) e landscape (orientamento orizzontale).

Come mostrato dal seguente esempio, l’orientamento insieme a device-width/height può essere usato per indirizzare degli stili a uno specifico dispositivo.

@media screen and (min-device-width : 768px) 
and (max-device-width :1024px) and (orientation : landscape) {
/* Regola per iPad con orientamento landscape */
}

device-aspect-ratio

Per applicare stili in base alle proporzioni tra la larghezza e l’altezza del dispositivo (device-width e device-height) si può usare device-aspect-ratio.

@media screen and ( device-aspect-ratio: 16/9) { … }

resolution

La media features resolution si riferisce alla risoluzione, alla densità di pixel del dispositivo.

@media print and (min-resolution: 300dpi) { … }

Utilizzata in questo modo però resolution non è particolarmente utile se non per la stampa.

Per inviare elementi grafici ai dispositivi ad alta definizione, come i dispositivi retina, è necessario utilizzare una media query più complessa.

@media
only screen and (-webkit-min-device-pixel-ratio: 1.25),
only screen and ( min--moz-device-pixel-ratio: 1.25),
only screen and ( -o-min-device-pixel-ratio: 1.25/1),
only screen and ( min-device-pixel-ratio: 1.25),
only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)
{
	/* Elementi grafici per schermi ad alta risoluzione */
}

Ulteriori informazioni sulla densità di pixel nei dispositivi ad alta definizione sono disponibili nei seguenti documenti:

Inserire le media queries nell’elemento link

Le media queries possono essere usate anche nell’attributo media dell’elemento link.

<link rel="stylesheet" type="text/css" media="print" 
href="print.css">

Anche nell’attributo media può essere specificato solo il tipo di media, come nell’esempio precedente, o un tipo di media e una media features, come nell’esempio successivo.

<link rel="stylesheet" media="only screen 
and (max-width: 420px)" href="mobile.css" />

Quando si utilizza una media query nell’elemento link è opportuno usare la parola chiave only che nasconde il foglio di stile ai browser che non supportano le media query.

Usare le media queries nell’elemento link presenta il vantaggio di indirizzare al browser un foglio di stile specifico per la caratteristica indicata nell’attributo media.

In questo modo, è possibile inviare un foglio di stile che tenga conto della densità di pixel del dispositivo e utilizzi immagini adeguate.  Allo stesso tempo però, la presenza di più fogli di stile può rendere più lungo e complesso il lavoro di progettazione e di modifica di un template.

Le media queries e Internet Explorer 8

Internet Explorer fino alla versione 8 non supporta le media queries ma è possibile estendere il supporto anche a questi browser con una delle seguenti librerie javascript:

Il supporto che queste librerie forniscono è però parziale, ad esempio, Respond.js estende il supporto solo alle media queries basate su min/max-width.