Il calcolo delle dimensioni degli elementi in una griglia è estremamente semplice se si omette di considerare cosa accade quando l'utente ridimensiona la finestra del browser. Le Media Queries CSS3 permettono di considerare alcune possibilità, ma ovviamente non possono intercettare l'evento JavaScript che controlla il ridimensionamento. A questo pensa jQuery.
Consideriamo una semplice griglia con quattro elementi:
<div id="grid">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
Consideriamo inoltre il caso peggiore, ossia una griglia dalle dimensioni fisse:
#grid {
width: 960px;
margin: 0 auto;
overflow: hidden;
}
#grid div.box {
float: left;
width: 230px;
margin: 0 5px;
}
La larghezza complessiva è di 960 pixel. 960 diviso 4 è uguale a 240. Dai 240 vanno sottratti i 5 pixel dei margini orizzontali ed il risultato è 230. Sui principali computer desktop questa soluzione è più che accettabile.
Ovviamente su tablet e smartphone questa soluzione non va bene. Le Media Queries risolvono il problema considerando alcuni casi:
@media screen and (max-width: 768px) {
#grid {
width: 700px;
}
#grid div.box {
width: 165px;
}
}
Ma cosa succederebbe se venisse rilasciato un nuovo modello di tablet la cui risoluzione in modalità portrait prevede una larghezza di 680 pixel? Bisognerebbe creare una nuova media query. E così via all'infinito.
Con jQuery è invece possibile sfruttare l'evento resize:
// Nel CSS abbiamo prima eliminato la larghezza fissa dalla griglia, rendendola fluida
var resizeGrid = function() {
var winWidth = $(window).width();
var boxWidth = (winWidth / 4) - 10; // i due margini orizzontali, 4 è il numero di box per riga
$('div.box', '#grid').width(boxWidth);
}
$(function() {
resizeGrid(); // setup iniziale
$(window).on('resize', function() { // evento resize
resizeGrid();
});
});
Come si può notare la soluzione in jQuery è molto più flessibile perché prende in considerazione tutte le possibili dimensioni della finestra del browser.