Snelle tip verschillende lay-outs voor verschillende breedten

Het komt steeds vaker voor dat websites en applicaties verschillende lay-outs bieden afhankelijk van de venstergrootte of resolutie van de gebruiker. Dit kan op verschillende manieren worden bereikt, van CSS tot JavaScript-oplossingen.

In deze snelle video-tip leren we hoe belachelijk eenvoudig het is om dit te doen met een vleugje jQuery en de methode resize ().

Door de "resize ()" -methode van jQuery te gebruiken, kunnen we gemakkelijk luisteren wanneer de gebruiker de breedte van zijn browservenster verandert.

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

Vervolgens richten we ons vervolgens op de gewenste CSS-eigenschappen.

 #container width: 800px; hoogte: 1000 px; achtergrond: # e3e3e3; marge: automatisch;  / * Containerformaat wijzigen voor grotere vensters. * / .large #container width: 1000px;  #nav width: 100%; hoogte: 100 px; randbodem: 1px effen wit; achtergrond: # 999999;  .large #nav float: left; breedte: 200 px; border-bottom: none; border-right: 1px effen wit; hoogte: 1000 px; 

• Volg ons op Twitter of abonneer je op de Nettuts + RSS Feed voor de beste tutorials voor webontwikkeling op internet.