le Media Query per creare una esperienza di navigazione su misura

Una delle sfide che dobbiamo affrontare oggi quando sviluppiamo una interfaccia web è realizzare una grafica che si adatti alla sempre maggiore quantità di dispositivi che esistono, ognuno con le proprie dimensioni.

Se osserviamo gli accessi alle nostre pagine web, infatti, possiamo notare che queste sono visitate sempre più spesso da tablet e da dispositivi mobili.

Grazie quindi al 3G, ed in previsione delle reti 4G in arrivo nel 2016, quindi, i dispositivi mobili vengono considerati il futuro della navigazione web.

Se CSS2, quindi aveva dato la possibilità di utilizzare un foglio di stile diverso ad esempio per la stampa, CSS3 va oltre introducendo le media query: delle dichiarazioni che ci permettono di impostare delle regole differenti a seconda dei dispositivi di destinazione.

Esistono due modi per integrare tali dichiarazioni, ma vediamo velocemente gli esempi.

Metodo 1

< link href="iphone.css" rel="stylesheet" type="text/css" 
media="only screen and (min-width:0px) and (max-width:320px)" >
 
< link href="ipad.css" rel="stylesheet" type="text/css" 
media="only screen and (min-width:321px) and (max-width:768px)" >
 
< link href="screen.css" rel="stylesheet" type="text/css" 
media="only screen and (min-width:769px)" >

In questo modo possiamo utilizzare dei fogli di stile diversi a seconda del dispositivo che visualizzerà la nostra pagina web.

ATTENZIONE!!
Modificando la larghezza della nostra pagina per iPhone, e visualizzandola sul device, ci accorgeremo che il tag width non ha fatto correttamente ciò che gli avevamo chiesto.
Per questo tipo di dispositivi, infatti, dobbiamo fare una piccola modifica al tag head della nostra pagina. Bisogna aggiungere questo codice:

< meta name="viewport" content="width=device-width, 
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Metodo 2

Il secondo medoto, del tutto uguale al primo, utilizza la media query all’interno dei fogli di stile. Un piccolo esempio, infatti, ci permette di cambiare il colore di un div al ridimensionamento del nostro browser.

Ecco il codice CSS:

@media screen and (max-width: 600px) {
        .one {background: #F9C;}
        span.lt600 {    display: inline-block;}
}
@media screen and (min-width: 900px) {
        .two {background: #F90;}
        span.gt900 {display: inline-block;}
} 
@media screen and (min-width: 600px) and (max-width: 900px) {
        .three {background: #9CF;}
        span.bt600-900 {display: inline-block;}
}
@media screen and (max-device-width: 480px) {
        .iphone {background: #ccc;}
}

Questo invece l’html:

< div class="wrapper one" >
Quest'area si evidenzierà quando la dimensione 
del tuo browser sarà inferiore a 600px
< / div >

< div class="wrapper two" >
Questo box si evidenzierà quando la dimensione 
del tuo browser sarà superiore a 900px
< / div >

< div class="wrapper three" >
Questo box si evidenzierà quando la dimensione 
del tuo browser sarà compresa tra 600px e 900px
< / div >

< div class="wrapper iphone" >
Questo box si evidenzierà quando la dimensione 
massima del tuo browser sarà 480px (iPhone)
< / div>

Ecco l’esempio. Proviamo a ridimensionare la finestra del browser tenendolo aperto.

Cosa ne pensate?
Utilizzerete le media query nei vostri progetti?