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 |
portrait orlandscape |
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 |
progressive orinterlace |
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) |
Lascia un commento