Inhalt
Auszeichnung in 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 diesem ersten Schritt werden nur die Farben und Abstände definiert.
Später werden die Seitenelemente …
auf schmalen Bildschirmen unter-,
auf größeren Bildschirmen nebeneinander dargestellt.
Dieses Grid Layout wird mit wenigen Zeilen CSS erreicht.