Este din ce în ce mai frecvent ca site-urile web și aplicațiile să furnizeze machete diferite în funcție de dimensiunea ferestrei utilizatorului sau de rezoluția acestuia. Acest lucru poate fi realizat într-o varietate de moduri, variind de la soluții CSS la JavaScript.
În acest sfat rapid, vom afla cât de simplu este să faceți acest lucru cu o atingere de jQuery și metoda de redimensionare ().
Prin utilizarea metodei "resize ()" a lui jQuery, putem asculta cu ușurință atunci când utilizatorul modifică lățimea ferestrei browserului.
funcția checkWindowSize () if ($ (fereastră) .width ()> 1800) $ ('body') addClass ('mare'); altceva $ ('body'). removeClass ('large'); $ (fereastră) .resize (checkWindowSize);
Apoi, ulterior, direcționăm în mod corespunzător proprietățile CSS dorite.
#container width: 800px; înălțime: 1000 pixeli; fundal: # e3e3e3; marja: auto; / * Modificați dimensiunea containerului pentru ferestrele mai mari. * / .large #container width: 1000px; #nav lățime: 100%; înălțime: 100px; partea frontală de fundal: 1 pix solid alb; fundal: # 999999; .large #nav float: left; lățime: 200px; frontieră de fund: nici unul; frontal-dreapta: 1 pix solid alb; înălțime: 1000 pixeli;