Introduzione

La rapida diffusione di dispositivi mobili ha rapidamente rivoluzionato il mondo del web design. Gli utenti non visualizzare i contenuti web solo su sistemi desktop tradizionali, ma utilizzano sempre più smartphone, tablet e altri dispositivi con una vasta gamma di dimensioni e risoluzioni differenti. La sfida per i web designer è di garantire che i lorositi vengano visualizzati bene non solo su uno schermo tradizionale, ma anche sui più diversi dispositivi oggi in commercio.

Le media queries sono un ottimo modo per fornire stili diversi per ciascun dispositivo, offrendo la migliore esperienza di navigazione ad ogni tipo di utente.

Le media query espandono il ruolo del attributo media introdotto con i CSS 2 che controlla come vengono applicati gli stili in base al differente supporto utilizzato. Ad esempio, è stata pratica comune per anni usare un foglio di stile separato per la stampa utilizzando la dichiarazione media="print".

Le media queries disponibili con i CSS3 riprendono quest’idea e mirano ad estenderla.Anziché optare per un tipo specifico di dispositivo, si considera una (o più) determinata capacità del dispositivo, come ad esempio:

  • larghezza e altezza della finestra del browser
  • larghezza e altezza del dispositivo
  • orientamento del dispositivo – (ad esempio, il telefono è in modalità orizzontale o verticale?)
  • risoluzione (ad esempio il retina display di iPhone 4)

Supporto alle Media Queries e funzionalità

Le media queries sono supportate da Internet Explorer (IE) 9 , Firefox 3.5 , Safari 3 , Opera 7 , così come sulla maggior parte dei browser disponibili nei moderni smartphone e tablet. Anche se le vecchie versioni di IE non supportano le media queries, è possibile – e altamente consigliato – iniziare a utilizzarle da subito.

Parametro Valore Min/Max Descrizione
width Length Si Larghezza dell’area visualizzata
height Length Si Altezza dell’area visualizzata
device-width Length Si Larghezza del dispositivo
device-height Length Si Altezza del dispositivo
orientation portraitorlandscape No Orientamento del dispositivo
aspect-ratio Ratio (w/h) Si Rapporto tra larghezza e altezza dell’area visibile, espresso in frazione (es., 16/9)
device-aspect-ratio Ratio (w/h) Si Rapporto tra larghezza e altezza del dispositivo, espresso in frazione (es., 16/9)
color Integer Si Numero di bit di profondità di colore (if not color, the value is 0)
color-index Integer Si Numero di voci presenti nella tabella di lookup colori del dispositivo
monochrome Integer Si Numero di bit per pixel nella scala di bianchi e neri
resolution Resolution Si Densità di pixel del dispositivo, espressa con un numero intero seguito da dpi (dots per inch) odpcm (dots per centimeter)
scan progressiveorinterlace No Processo di scansione usato dalla TV
grid 0 or 1 No Se impostato a 1, il dispositivo è grid-based, come ad esempio un terminale telescrivente o il display di un telefono cellulare con un solo carattere fisso (tutti gli altri dispositivi sono 0)