Usando il Response Designe con il sistema a Box scegliendo la tecnica delle media-queries, per crare una pagina di esempio blocchi con il classico schema:
- versione internet: più righe con il primo box largo tutta la pagina, nelle successive righe i blocchi sono affiancati dove possibile
- versione tablet: i blocchi rimangono affiancati
- versione mobile: i blocchi sono uno sotto l’altro senza nessun affiancamento
Un esempio di codice che implementa questa logica:
<!DOCTYPE html>
<html>
<head>
<style>
DIV { box-sizing: border-box;}
body{ margin:0; padding:0; background-color:lightgreen; }
.gliglia{margin: 0px auto; background-color:lightblue;
padding: 25px;}
.grid{float: left; padding-left: 25px;position: relative;
width: 100%;width: 100%;}
.elemento{height:100px; background-color:gold;}
.riga{margin-left: -25px;}
@media only screen and (min-width: 480px) and (max-width: 599px) {
.elem1{width: 100%;}
.elem2{width: 100%;}
.elem4{width: 100%;}
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
.elem1{width: 100%;}
.elem2{width: 100%;}
.elem4{width: 50%;}
}
@media only screen and (min-width: 1025px) {
.gliglia{width: 1040px;}
.elem1{width: 100%;}
.elem2{width: 50%;}
.elem4{width: 25%;}
}
.riga:before, .riga:after{content: " "; display: table;}
.riga:after, .gliglia:after{ clear: both;}
</style>
</head>
<body>
<div class="gliglia">
<div class="riga">
<div class="grid elem1">
<p class="elemento">1 int, 1 tablet, 1 mobile</p>
</div>
</div>
<div class="riga">
<div class="grid elem2">
<p class="elemento">1/2 int, 1 tablet, 1 mobile</p>
</div>
<div class="grid elem2">
<p class="elemento">1/2 int, 1 tablet, 1 mobile</p>
</div>
</div>
<div class="riga">
<div class="grid elem4">
<p class="elemento">1/4 int, 1/2 tablet, 1 mobile</p>
</div>
<div class="grid elem4">
<p class="elemento">1/4 int, 1/2 tablet, 1 mobile</p>
</div>
<div class="grid elem4">
<p class="elemento">1/4 int, 1/2 tablet, 1 mobile</p>
</div>
<div class="grid elem4">
<p class="elemento">1/4 int, 1/2 tablet, 1 mobile</p>
</div>
</div>
</div>
<div class="riga"> <div class="grid elem1">footer</div></div>
</body>
</html>
In questo esempio non è stato usato il tag <TABLE>, impossibile da usare con le media-queries, quindi sono usati dei tag <DIV> ai quali è stata impostata la una caratteristiche molto importante:
DIV { box-sizing: border-box;}
per poi poter usare le percentuali sulle larghezze: storicamente un elemento HTML (non solo i tag DIV) hanno una larghezza ma di default la larghezza non comprende i margini che vengono calcolati a parte, con questa proprietà la larghezza e l’altezza dei bordi viene compresa nella definizione nei CSS e si evitano sorprese: per esempio con due elementi al 50% e un po’ di bordo, senza questa proprietà il secondo elementi andrebbe a capo in quanto il bordo del primo elemento porterebbe la larghezza ad almeno il 51% e non ci sarebbe abbastanza spazio, per maggiori dettagli si rimanda alla pagina W3C.
Successivamente sono stati impostati margini del BODY per eviatre di perdere spazio:
BODY{ margin:0; padding:0; background-color:lightgreen; }
La classe griglia vuole essere solo un contenitore di righe, in poche parole sarebbe il <table> della nostra struttura, non sarebbe necessario ma è sempre buona norma mettere un div contenitore per poter aggiungere impostazioni che, altrimenti, sarebbero complicate da mettere nei vari elementi della struttura, in questo esempio abbiamo definito un colore e un padding, la larghezza non è indispensabile perché se non specificata il tag DIV si “prende” tutto lo spazio che trova. La classe riga è la definizione delle caratteristiche “orrizzontali” del gruppo di elementi, si può pensare come un <TR> ma con una caratteristica diversa: questo non contiene un numero fisso di elementi. La classe grid è la più interessante dell’esempio perchè definisce che ogni elemento della griglia è fluttuante e indica che la posizione deve essere relativa (di solito è il default ma meglio ridefinirlo per evitare brutte sorprese), questo è semplicemente il contenuto di ogni elemento della griglia e in questo esempio abbiamo definito un aspetto grafico: altezza e colore per poter identificare ogni box, da non confondere il contenuto con l’elemento fluttuante: sempre meglio fare due tag per evitare conflitti tra le proprietà e i tag.
Le successive classi sono definite con le media queries e cioè pezzi di css condizionati ad alcune caratteristiche, in questo caso ci sono definiti tre blocchi con dove sono definite le stesse classi ma con valori percentuali diverse, il primo per il mobile (minimo 480 e massimo 599), il secondo per tablet (minimo 600 massimo 1024) e il terzo per i browser internet (con monitor con più di 1024 pixel):
@media only screen and (min-width: 480px) and (max-width: 599px) {
...
}
@media only screen and (min-width: 600px) and (max-width: 1024px) {
...
}
@media only screen and (min-width: 1025px) {
.gliglia{width: 1040px;}
...
}
Le ultime due righe dello stile sono le più complicate da spiegare e un occhio esperto potrebbe essere infastidito, perché sono la definizione di due condizioni sulle righe, indispensabili per evitare i problemi con gli elementi fluttuanti, la prima riga aggiunge prima e dopo un elemento di classe riga uno spazio e indica che i figli di elemento devono essere disposti a tabella, per maggiori dettagli vi consiglio di studiare la pagina W3C:
.riga:before, .riga:after{content: " "; display: table;}
.riga:after, .gliglia:after{ clear: both;}
La seconda classe invece è fondamentale, perche impone che alla fine di ogni riga (e alla fine della griglia) non ci siano altri elementi fluttuanti, con il valore both si indica al browser che non ci deve essere altro a sinistra e a destra dell’elemento quindi il browser sarà costretto a posiziona gli elementi successivi sotto, questa proprietà è spesso mal vista ma ormai indispensabile per chi vuole sviluppare uno stile responsivo, consiglio comunque la pagina W3C.
