Inhalt
HTML
Der Seiteninhalt besteht aus Header, Navigation, Inhaltsbereich (main) und dem Footer.
Was vielen nicht bewusst ist: HTML an sich ist responsiv - Elemente wie Überschriften und Absätze nehmen die gesamte Breite des Viewports ein und brechen überstehenden Text um, so dass er nach unten in einer neuen Zeile dargestellt wird. Erst eine starre Mehrspaltigkeit verhindert die passende Darstellung auf mobilen Geräten.
Formatierung mit CSS
In einem ersten Schritt hatten wir Farben und Abstände definiert.
Die Seitenelemente werden …
auf schmalen Bildschirmen unter-,
auf größeren Bildschirmen nebeneinander dargestellt.
Dieses Grid Layout wird mit nur wenigen Zeilen CSS erreicht.