Schnelltipp Unterschiedliche Layouts für unterschiedliche Breiten

Es wird immer häufiger, dass Websites und Anwendungen abhängig von der Fenstergröße des Benutzers oder der Auflösung unterschiedliche Layouts bereitstellen. Dies kann auf verschiedene Arten erreicht werden, von CSS bis hin zu JavaScript-Lösungen.

In diesem kurzen Videotipp erfahren Sie, wie lächerlich es ist, dies mit einem Touch von jQuery und der resize () -Methode zu tun.

Mit der "resize ()" - Methode von jQuery können wir leicht darauf achten, wenn der Benutzer die Breite des Browserfensters ändert.

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

Anschließend richten wir unsere gewünschten CSS-Eigenschaften entsprechend aus.

 #container width: 800px; Höhe: 1000px; Hintergrund: # e3e3e3; Marge: auto;  / * Ändern Sie die Containergröße für größere Fenster. * / .large #container width: 1000px;  #nav width: 100%; Höhe: 100px; Rand unten: 1px Vollweiß; Hintergrund: # 999999;  .large #nav float: left; Breite: 200px; Rand unten: keine; Rand rechts: 1px durchgehend weiß; Höhe: 1000px; 

• Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts + RSS-Feed für die besten Webentwicklungs-Tutorials im Web.