Worum geht es?
Unter Responsivem Webdesign versteht die automatische Anpassung eines Web-Layouts an die Bildschirmgröße (Viewports). Hierbei wird auch das Format berücksichtigt ("Landscape"- oder "Portrait"-Modus), also ob ein Gerät hochkant oder quer gehalten wird.
Top Down
Der Top-Down-Ansatz geht von einer Layoutbreite für Desktop-Monitore aus, meist 1024 oder 960 Pixel. Über CSS3 Media Queries wird definiert, wie sich bestimmte HTML-Elemente unterhalb von bestimmten Viewportbreiten verhalten. Zusätzliche Styles greifen unterhalb einer Breite von 768 Pixeln, weitere unterhalb von 480 Pixeln etc.
Bottom Up
Der Bottom-Up-Ansatz arbeitet analog zum Top-Down-Ansatz, geht jedoch von einem Design für Mobilgeräte aus. Mit wachsender Displaygröße werden zusätzliche Styles für Layoutelemente hinzugenommen. Diese Beispielseite arbeitet nach dem Bottom-Up-Ansatz. Variieren Sie die Displaybreite, um die Übergänge zu sehen.