Share
Sta diventando sempre più comune per i siti Web e le applicazioni fornire layout diversi a seconda della dimensione della finestra dell'utente o della risoluzione. Questo può essere realizzato in vari modi, dalle soluzioni CSS a JavaScript.
In questo suggerimento rapido del video, scopriremo come è semplice farlo con un tocco di jQuery e il metodo resize ().
Utilizzando il metodo "resize ()" di jQuery, possiamo facilmente ascoltare quando l'utente cambia la larghezza della finestra del browser.
Accentsconagua
function checkWindowSize () if ($ (window) .width ()> 1800) $ ('body'). addClass ('large'); else $ ('body'). removeClass ('large'); $ (window) .resize (checkWindowSize); Successivamente, miriamo di conseguenza alle nostre proprietà CSS desiderate.
#container width: 800px; altezza: 1000px; sfondo: # e3e3e3; margine: auto; / * Modifica le dimensioni del contenitore per finestre più grandi. * / .large #container width: 1000px; #nav width: 100%; altezza: 100 px; border-bottom: 1px solido bianco; sfondo: # 999999; .large #nav float: left; larghezza: 200 px; border-bottom: nessuno; border-right: 1px solido bianco; altezza: 1000px;
