Sfat rapid Diferite machete pentru diferite lățimi

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; 
  • Urmați-ne pe Twitter sau abonați la Nettuts + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.
Cod