Come tutti sapete una delle chiavi vincenti della diffusione della tecnica responsive è l'uso delle media-query. Niente di tecnicamente nuovo, nessuna strana invenzione, ma solo un modo intelligente di usare diversti stili css in base alla risoluzione del device che visualizza le nostre pagine.
I 2 modi più usati per dire al browser che stile usare in quel determinato momento e a quella risoluzione, sono 2:
- inserire le media-query nel file css globale. In questo caso nel tag <head> della nostra pagina richiamiamo solamente il file generale style.css Questo file si occuperà poi al suo interno di andare a discriminare i cambiamenti di stile in base alla risoluzione, in base a questa sintassi di esempio:
@media only screen and (max-width: 1300px) {
nuove regole css da utlizzare
}
- la seconda strada (che preferisco) è quella di generale tanti file css per quanti sono i nostri break-point. Come già datto in uno scorso articolo non pensate che il vostro design sia adatto ai 4 canonici break-point ma pensate e confrontate la robustezza del vostro design per moltissime dimensioni dello schermo. Io quindi agisco in modo diverso per ogni progetto e creo dei miei file css che racchiudono dei break-point personalizzati fino al punto di "rottura" del design in corso. Nel tag <head> vengono quindi richiamati tanti file css al cui interno vengono dichiarate le regole da utilizzare per quella risoluzione. La sintassi di esempio da utilizzare in <head> è molto simile alla precedente:
<link href="css/screen_1024.css" media="only screen and (max-width: 1024px)" rel="stylesheet">
L'unica pecca di questa tecnica è che se create delle pagine statiche senza include o altre tecniche dovrete per ogni pagina ricopiare tutte le chiamate ai file css che utilizzano le media-query.
Le 2 tecniche producono lo stesso effetto, ma c'è un vantaggio nell'utilizzare la seconda soprattutto in fase di debug e test (e soprattutto se come me utilizzate Firebug).
Nella prima tecnica infatti per capire se la regola che vi aspettate stà funzionando dovete aprire il file css generale e andare nella riga che Firebug vi indica (se la regola è attiva) nella finestra di ispezione.
Come vedete in questo caso nel file css viene richiamata una regola diversa per il logo a risoluzioni più basse di 1024px, ma la cosa non è evidente perchè Firebug ci indica solo che la regola è cambiata alla riga 194 del file css "navigation.css".
Nel secondo caso invece Firebug ci aiuta a capire se la regola che ci aspettiamo stà funzionando come deve: