Einführung in das Layout für verschiedene Bildschirme in CSS

In der modernen Welt muss eine Website auf Geräten mit unterschiedlichen Bildschirmgrößen gut aussehen.

In der Regel unterteilt man Geräte in vier Klassen: Computer (desktop), Laptops, Tablets (tablet) und Telefone (mobile).

Früher, in alten Zeiten, waren die gängigen Bildschirmgrößen aller Geräte bekannt, zumal es nicht so viele gab. Und Websites wurden so gestaltet, dass sie auf der bekannten Liste von Auflösungen korrekt angezeigt wurden.

Heutzutage gibt es so viele Geräte, dass es unmöglich ist, eine Liste von Auflösungen zu erstellen, für die eine Website optimiert werden müsste. Heute geht man davon aus, dass das Layout auf Bildschirmen jeder Größe korrekt dargestellt werden muss.

Dies wird durch das Umstrukturieren von Blöcken an entscheidenden Punkten des Layouts erreicht. Dabei werden diese Schlüsselpunkte nicht für bestimmte Geräte ausgewählt, sondern nach dem Inhalt der Website - so, dass er gut aussieht.

Zwischen den Schlüsselpunkten sollte die Breite der Elemente der Website flexibel sein, damit sie sich der Bildschirmbreite anpasst. An den Schlüsselpunkten erfolgt die Neupositionierung der Blöcke.

Das beschriebene Layout wird als adaptiv oder responsiv (responsive) bezeichnet. Damit werden wir uns in den folgenden Lektionen beschäftigen.