Rask Tips Forskjellige layouter for forskjellige bredder

Det blir stadig mer og mer vanlig for nettsteder og applikasjoner å gi forskjellige layouter avhengig av brukerens vindu størrelse eller oppløsning. Dette kan oppnås på en rekke måter, alt fra CSS til JavaScript-løsninger.

I denne videoens hurtige tips lærer vi hvor lekfullt det er å gjøre dette med et snev av jQuery, og resize () metoden.

Ved å bruke jQuery's "resize ()" -metode, kan vi lett lytte etter når brukeren endrer bredden på nettleservinduet.

 funksjonskontrollWindowSize () if ($ (window) .width ()> 1800) $ ('body'). addClass ('large');  else $ ('body'). removeClass ('large');  $ (vindu) .resize (checkWindowSize);

Deretter målretter vi etter de ønskede CSS-egenskapene tilsvarende.

 #container width: 800px; høyde: 1000px; bakgrunn: # e3e3e3; margin: auto;  / * Endre beholderstørrelse for større vinduer. * / .large #container width: 1000px;  #nav bredde: 100%; høyde: 100px; grensebunn: 1 px solid hvit; bakgrunn: # 999999;  .large #nav float: left; bredde: 200px; grensebunn: ingen; grense-høyre: 1px solid hvit; høyde: 1000px; 

• Følg oss på Twitter, eller abonner på Nettuts + RSS-feed for de beste webutviklingsopplæringene på nettet.