Le lingue
Pagine
Legale
Articles of Gleenk WebdesignRealizzare un layout per risoluzioni diverse con le Media Queries2011-06-18 10:06:44 gleenk
0
Submit
Sulla scia dell’articolo che spiega come utilizzare le Media Queries CSS3, vediamo come realizzare unastruttura elementare in CSS che permetta di visualizzare in modo diverso gli stessi elementi HTML aseconda della risoluzione del browser che stiamo utilizzando.
Ricordiamo innanzitutto che, affinchè si veda il risultato “differente”, sarà necessario possedere unbrowser che supporti le media queries CSS3. Premesso ciò, quello che andremo a fare, sarà direalizzare una struttura html unica ma che verrà mostrata in modo differente se visualizzata ad unarisoluzione superiore o inferiore ai 1000px.
Il mio consiglio è di realizzare una versione di default standard in modo da garantire il supporto visivocompleto a tutti gli utenti, qualsiasi risoluzione utilizzino, e di usare quindi questa tecnica per variare ladisposizione degli elementi, ad esempio, su schermi più grandi della media. In situazioni di schermimolto grandi infatti si rischia che i 960-1000px di colonna centrale diventino restrittivi e tutto risulti troppoconcentrato…
Una struttura HTML unicaCome 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>
0
</div></body>
Abbiamo racchiuso col1 e col2 all’interno di un unico elemento contenitore (blocks1) in modo da potergiocare con i float a seconda delle risoluzioni. Se infatti le colonne fossero state tutte separate nonsaremmo 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 pixeldovrà 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 maggioriGrazie alla magia appena realizzata possiamo quindi compilare due fogli stile diversi (è possibileutilizzare anche un foglio stile unico e fare la dichiarazione min-width all’interno del foglio stile. Per unesempio vi rimando qui). Il primo sarà quello standard, visibile a tutte le risoluzioni medio-piccole (e visibilesui 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 utilizzaredelle dimensioni fluide. Ma funziona tutto alla grande anche utilizzando i beneamati pixel! Questadichiarazione ci porterà ad ottenere la seguente struttura:
Il layout specifico per i monitor più grandi invece presenterà solo quelle dichiarazioni CSS che ci interessamodificare 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 glismartphone, i tablet e tutto ciò che utilizza risoluzioni diverse
Top Related