La necessità di adattare l'impaginazione alle diverse dimensioni e risoluzioni degli schermi, ha introdotto il concetto di resolution breakpoint (punti di interruzione della risoluzione), in modo da stabilire delle soglie (espresse in pixel) superate le quali modificare la presentazione grafica in funzione della larghezza del dispositivo.
Per esempio potremmo identificare quattro tipi di dispositivi con i corrispondenti resolution breakpoint:
- smartphone con risoluzione fino a 768 pixel
- tablet con risoluzione inferiore a 1024 pixel
- desktop con risoluzione superiore a 1024 pixel
L'elenco fornito non è certamente l'unico possibile, ma serve solo per dare un'idea di come funziona il metodo.
Come si può osservare dalla figura qui sopra, ad ogni breakpoint corrisponde una riorganizzazione del layout della pagina in modo da adattarsi alle dimensioni dello schermo.
Lo strumento principale per gestire i breakpoint è l'utilizzo delle cosiddette media query (o media rule). Si tratta di regole da inserire nel foglio stile in base alle quali è possibile cambiare gli stili applicati al documento in base alle caratteristiche del dispositivo (media) su cui viene visualizzato.
L'argomento generale delle media query è piuttosto complesso e non può essere affrontato completamente in questa sede. Ci limiteremo qui a fornire qualche semplice esempio per spiegare come funziona il meccanismo.
Un primo esempio di media query (da inserire fra gli stili del documento) è il seguente:
{
body { background-color: lightgreen; }
}
Si presti attenzione alle parentesi graffe che delimitano la regola (ci sono due coppie di parentesi graffe, una esterna e l'altra più interna).
Il significato di questa regola è abbastanza semplice. Anzitutto la regola si riferisce alle caratteristiche dello schermo (screen) del dispositivo su cui viene visualizzata la pagina. Nei nostri esempi il dispositivo a cui si applica la regola sarà sempre screen, ma altri valori possibili sono print (stampante), speech (lettore vocale), all (tutti i tipi di media).
Inoltre la regola precedente si applica solo se la larghezza dello schermo è maggiore o uguale a 1024px. In tale caso il colore dello sfondo del body viene impostato su lightgreen. Per schermi con dimensioni inferiori non si applica.
Vediamo un altro esempio:
{
#container { width: 1020px; }
}
In questo caso la regola si applica per schermi con dimensioni comprese fra 769 e 1024px e si riferisce all'elemento con id container nella pagina.
Usando nel foglio stile più media query in cascata (una dietro l'altra) è possibile cambiare la formattazione del documento a seconda del valore dei breakpoints. Si consideri per esempio:
body {
background: red;
}
@media screen and (min-width: 768px) {
body {
background: green;
}
}
@media screen and (min-width: 1024px) {
body {
background: blue;
}
}
L'interpretazione è abbastanza semplice tenendo conto che le regole vengono applicate in ordine dall'alto verso il basso (secondo la sequenza con cui compaiono nel foglio stile).
Per prima cosa viene applicata la regola generale (valida per tutti gli schermi):
background: red;
}
Dunque il colore di sfondo viene impostato a rosso (red). Per gli schermi con larghezze superiori a 480 px il colore di sfondo è verde (green), per quelli con larghezze superiori a 1024 è blu (blue).
Si osservi come non sia necessario in questo caso verificare se le dimensioni dello schermo sono comprese fra due valori (es. fra 768 e 1023) poiché le regole vengono applicate una dopo l'altra. Quindi per esempio con uno schermo di larghezza 1200 verrà applicata prima la regola generale (sfondo rosso), poi la regola per gli schermi superiori ai 768 px (schermo verde) e infine quella per gli schermi superiori ai 1024 px (sfondo blu). Alla fine solo l'ultima regola ha effetto sulla visualizzazione della pagina.
Sito realizzato in base al template offerto da
http://www.graphixmania.it
