La tecnica che allarga o stringe un sito in base alla risoluzione del browser si chiama
responsive design.
Per le risoluzioni più grandi (dai tablet in su) si potrebbero utilizzare le percentuali invece dei pixel come unità di misura. In questo modo il layout avrebbe sempre la stessa forma e si adatterebbe alla larghezza disponibile.
Ci sarebbe, però, il problema degli smartphone che hanno una risoluzione troppo bassa per visualizzare, per esempio, un layout a due colonne. In questo caso un menù laterale sarebbe meglio spostarlo sopra o sotto il contenuto principale o nasconderlo del tutto.
Per fare tutto questo puoi utilizzare le
media query del CSS (la novità che serve in questo caso è stata introdotta con i CSS3), utilizzando il parametro
media dei tag
link e
style che specifica quale foglio di stile utilizzare in base al dispositivo che utilizza il visitatore.
Nelle versioni precedenti del CSS questo parametro veniva utilizzato per compiti più semplici (come, ad esempio, per stabilire se si trattasse di una stampa).
Il tag
link per includere sempre un file CSS è il seguente:
Codice:
<link rel="stylesheet" href="style.css" />
Se, invece, lo si vuole includere solo per la stampa:
Codice:
<link rel="stylesheet" href="style.css" media="print" />
I valori che può assumere il parametro
media sono i seguenti:
- "all": è equivalente a non inserirlo perché viene visualizzato da tutti;
- "screen": viene visualizzato dal browser;
- "print": viene visualizzato solo in fase di stampa;
- "projection": viene visualizzato nelle presentazioni;
- "aural": viene visualizzato dai browser a sintesi vocale;
- "braille": viene visualizzato dai dispositivi basati sull'uso del braille;
- "embossed": viene visualizzato dalla stampanti braille;
- "handheld": viene visualizzato dagli smartphone;
- "tty": viene visualizzato dai dispositivi a carattere fisso;
- "tv": viene visualizzato sui televisori.
Con i CSS3 vengono inseriti nuovi valori che si possono combinare. Per esempio, se vuoi visualizzare un file CSS solo per i dispositivi da 800 pixel fino a 1024 di larghezza, puoi utilizzare:
Codice:
<link rel="stylesheet" href="style.css" media="all and (min-width: 800px) and (max-width: 1024px)" />
La stessa
media query può essere utilizzata all'interno del file CSS in questo modo:
Codice:
@media screen and (min-width: 800px) and (max-width: 1024px) {
/*Istruzioni varie*/
}
Non è obbligatorio utilizzare una larghezza minima o massima, ma anche solo una delle due. Quindi per gli smartphone, se non sbaglio le dimensioni, la
media query sarà:
Codice:
@media screen and (max-width: 320px)
Oltre a
min-width e
max-width ci sono moltissime altre condizioni che si possono utilizzare.