Le media query introdotte con i CSS3 possono rappresentare uno strumento straordinariamente efficace per indirizzare regole specifiche a dispositivi, tipi di schermo o contesti specifici. La loro applicazione può andare però ben al di là  di situazioni relative all'alternativa layout per il desktop/layout per il mobile come in questo articolo.

Chris Coyer ci mostra un uso intelligente delle media query per creare una barra laterale che si auto-adatta nei contenuti e nell'aspetto grafico a seconda delle dimensioni che assume. Più facile osservare la demo, per capire, che provare a spiegare a parole, è sufficiente ridimensionare la finestra per vedere l'effetto in azione.

3 CommentiDi' la tua

Mmmm... Sinceramente non riesco a capire l'innovazione, le media query le preferisco utilizzate in altri esempi. Non é meglio il lavoro presentato da Ethan Marcotte per A List Apart? A chi interessasse ed ancora non lo ha visto vi indico la traduzione in italiano e l'esempio implementato da Jon Hicks sul suo sito: provate a cambiare le dimensioni del browser e capirete il significato di sito cross-device.

Davide
Davide

In alcuni siti facio una cosa simile, ma un po' old style: una funzione JS fornisce la dimensione della finestra del browser e, in funzione di questo valore, carico un determinato file CSS. Il maggior difetto di questa soluzone é che il resizing della finestra non cambia niente: é necessario fare il reload della pagina dopo il resizing. Con le media query (CSS3) é tutto un'altra musica!

Xavier
Xavier

Ecco una piccola lista di fluid webdesign e media query http://urli.st/BgM che sto raccogliendo in questo periodo. Aggiungete a piacimento altri esempi se li ritenete inerenti.

Gio
Gio