Una panoramica sulle media-query di CSS3
Martedì 12 Luglio 2011 - 10:57
di Mariano Calandra
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" />
Commenti
1
Utilizzo già da qualche tempo le media query per ottimizzare i layout dei miei progetti web.
Il mio modo di utilizzare questa risorsa è:1. definisco un foglio di stile base in cui inserisco tutte le regole valide per qualunque dispositivo
2. aggiungo un foglio di stile “mobile” in cui definisco le regole specifiche per dispositivi piccoli (dimensioni, aree nascoste)
3. aggiungo un foglio di stile “desktop” in cui definisco le regole specifiche per schermi di grandi dimensioni (floating, etc)Esistono vari boilerplates pronti all’uso che esprimono questo modo di lavorare ma quello che ho trovato più semplice e concreto è:
http://thatcoolguy.github.com/.....ilerplate/Questo progetto è un semplice insieme di best practice improntato su html5 e css3. Implementa le media-query come descritto sopra e lascia massima libertà allo sviluppatore.
Ciao!
# - postato da Marco Pegoraro - 13 Luglio 2011 - 10:01
2
[…] Qualche mese fa scrissi un post in cui parlavo di tre proprietà dei CSS per la realizzazione di siti con un layout adattativo. Con gli smartphone e i tablet che diventano sempre più strumento di navigazione scegliere di realizzare un layout “liquido” è una scelta obbligata. Non è casuale, infatti, che alcuni temi di WordPress, come Yoko, nascano già con questa capacità. Nonostante gli sforzi, però, poco ancora si può fare per le immagini (il tema precedente, ad esempio, nasconde l’immagine dell’header su dispositivi con risoluzione bassa). Ma quali strumenti abbiamo se non vogliamo fare a meno delle immagini? […]
# - postato da Adaptive Image: piccole immagini per piccoli dispositivi | Edit - Il blog di HTML.it - 07 Settembre 2011 - 09:40