Una panoramica sulle media-query di CSS3

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.

@media screen and (max-width: 550px) {
  /* proprietà  */
}

Le proprietà  specificate in questo blocco verranno applicate solo alle risoluzioni inferiori ai 550 pixel. L'effetto complementare può essere ottenuto con min-width, in questo caso le proprietà  del blocco verranno applicate solo alle risoluzioni superiori ai pixel specificati. Le due proprietà  possono essere legate logicamente con un 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 si "attiva" se la massima risoluzione del dispositivo è uguale a quella specificata. Ad esempio, specificando una dimensione pari a 480 pixel è come se stessimo scrivendo delle regole esclusivamente per dispositivi iPhone.

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" />