I modi in cui entriamo sul Web sono molteplici: portatile, netbook, smartphone, tablet e così via. Dispositivi piuttosto diversi soprattutto per quanto riguarda le dimensioni. Compito di un buona progettazione è quello di dare un layout ottimale a ciascun dispositivo e di conseguenza a ciascuna risoluzione. Il compito fino ad oggi non era propriamente semplice e richiedeva l'uso di JavaScript, i CSS3 rendono il tutto molto più semplice con 3 semplici proprietà .
Le prime due proprietà sono min-width e max-width.
Le proprietà specificate in questo blocco verranno applicate solo alle risoluzioni inferiori ai 550 pixel. L'effetto complementare può essere ottenuto con min-width
and
@media screen and (min-width: 550px) and (max-width: 850px) {
/* proprietà */
}
In questo caso le proprietà si applicheranno alle risoluzioni comprese tra i 550 e gli 850 pixel.
La proprietà max-device-width
Infine, per evitare di accumulare tutto all'interno di un sol foglio di stile possiamo crearne di diversi, ad esempio iphone.css, smartphone.css, desktop.css e così via e assegnarli in base alle risoluzioni:
<link rel="stylesheet" media="screen and (max-device-width: 480px)" href="iphone.css" />
