# 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.

### Wofür ist es gut?

Responsives Webdesign könnte eine Antwort auf die Anforderung sein, verschiedene Bildschirmgrößen und Formate bedienen zu müssen, und trotzdem ein berechenbares Layout zu erstellen.