Sulla scia dell’articolo che spiega come utilizzare le Media Queries CSS3, vediamo come realizzare una struttura elementare in CSS che permetta di visualizzare in modo diverso gli stessi elementi HTML a seconda della risoluzione del browser che stiamo utilizzando.
Ricordiamo innanzitutto che, affinchè si veda il risultato “differente”, sarà necessario possedere un browser che supporti le media queries CSS3. Premesso ciò, quello che andremo a fare, sarà di realizzare una struttura html unica ma che verrà mostrata in modo differente se visualizzata ad una risoluzione superiore o inferiore ai 1000px.
Il mio consiglio è di realizzare una versione di default standard in modo da garantire il supporto visivo completo a tutti gli utenti, qualsiasi risoluzione utilizzino, e di usare quindi questa tecnica per variare la disposizione degli elementi, ad esempio, su schermi più grandi della media. In situazioni di schermi molto grandi infatti si rischia che i 960-1000px di colonna centrale diventino restrittivi e tutto risulti troppo concentrato…
Una struttura HTML unica
Come possiamo vedere dall’esempio, la struttura HTML che utilizziamo è la medesima:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Esempio di layout utilizzando le Media Queries CSS3</title> <link rel='stylesheet' media='screen' href='css/style.css' /> <link rel='stylesheet' media='screen and (min-width: 1001px)' href='css/large.css' /> </head> <body> <div class="wrapper"> <div id="header"></div> <div id="content"> <div class="blocks1"> <div class="col1"></div> <div class="col2"></div> <div class="clear"></div> </div> <div class="col3"></div> <div class="clear"></div> </div> <div id="footer"></div> </div> </body>
Abbiamo racchiuso col1 e col2 all’interno di un unico elemento contenitore (blocks1) in modo da poter giocare con i float a seconda delle risoluzioni. Se infatti le colonne fossero state tutte separate non saremmo riusciti ad ottenere il risultato desiderato. Attraverso la dichiarazione:
<link rel='stylesheet' media='screen and (min-width: 1001px)' href='css/large.css' />
diciamo invece di far in modo che se la risoluzione della finestra del browser è superiore ai 1001 pixel dovrà essere letto anche il foglio stile chiamato large.css. E’ qui che avviene la magia!
Due fogli stile diversi, uno di default ed uno per risoluzioni maggiori
Grazie alla magia appena realizzata possiamo quindi compilare due fogli stile diversi (è possibile utilizzare anche un foglio stile unico e fare la dichiarazione min-width all’interno del foglio stile. Per un esempio vi rimando qui). Il primo sarà quello standard, visibile a tutte le risoluzioni medio-piccole (e visibile sui browser che non supportano le media queries):
.wrapper {
width:960px;
margin:0 auto;
}
#header {
height:70px;
background:#CCC;
}
#footer {
height:40px;
background:#333;
}
#content {
position:relative;
}
.blocks1 {
float:left;
width:70%;
}
.col1 {
width:100%;
height:300px;
float:none;
background:#900;
}
.col2 {
height:300px;
background:#F60;
float:none;
width:100%;
}
.col3 {
background:#939;
height:600px;
}
.clear {
clear:both;
}Come vediamo non c’è nulla di particolare, se non che (solo per comodità) abbiamo scelto di utilizzare delle dimensioni fluide. Ma funziona tutto alla grande anche utilizzando i beneamati pixel! Questa dichiarazione ci porterà ad ottenere la seguente struttura:
Il layout specifico per i monitor più grandi invece presenterà solo quelle dichiarazioni CSS che ci interessa modificare e quindi, nel nostro caso, la disposizione delle colonne:
.wrapper {
width:1100px;
}
.col1 {
width:60%;
float:left;
}
.col2 {
width:40%;
float:left;
}
.col3 {
width:30%;
height:300px;
float:right;
}Che porterà quindi ad una visualizzazione su 3 colonne invece che 2:
Et voilà! Il gioco è fatto! In questo modo potremo ovviamente realizzare layout ad hoc anche per gli smartphone, i tablet e tutto ciò che utilizza risoluzioni diverse 😉
