Snabbtips Olika layouter för olika bredder

Det blir allt vanligare för webbplatser och applikationer att tillhandahålla olika layouter beroende på användarens fönsterstorlek eller upplösning. Detta kan åstadkommas på olika sätt, allt från CSS till JavaScript-lösningar.

I den här snabba snabbspetsen lär vi oss hur skrattsamt det är att göra detta med en touch av jQuery, och metoden resize ().

Genom att använda jQuerys "resize ()" -metod kan vi enkelt lyssna på när användaren ändrar bredden på webbläsarfönstret.

 funktion checkWindowSize () if ($ (window) .width ()> 1800) $ ('body'). addClass ('large');  else $ ('body'). removeClass ('large');  $ (fönster) .resize (checkWindowSize);

Därefter målar vi efter de önskade CSS-egenskaperna i enlighet därmed.

 #container width: 800px; höjd: 1000px; bakgrund: # e3e3e3; marginal: auto;  / * Ändra behållarstorlek för större fönster. * / .large #container width: 1000px;  #nav bredd: 100%; höjd: 100px; gränsbotten: 1px solid vit; bakgrund: # 999999;  .large #nav float: left; bredd: 200px; gränsbotten: ingen; gräns-höger: 1px solid vit; höjd: 1000px; 

• Följ oss på Twitter, eller prenumerera på Nettuts + RSS-flödet för de bästa webbutvecklingsstudierna på webben.