Einheiten

Pixel sind fest: 250 Pixel sind auf einem Smartphone und auf einem großen Monitor gleich 250 Pixel. Für kleine Dinge ist das in Ordnung, aber größere Teile einer Seite brauchen oft Größen, die sich dem Bildschirm anpassen. Dafür gibt es andere Einheiten:

• % (Prozent): ein Anteil der Größe des Elternelements. width: 50% bedeutet die halbe Breite des Elternelements. (Bei height funktionieren Prozentwerte nur, wenn das Elternelement eine festgelegte Höhe hat, deshalb verwendet man sie meist für Breiten.)
• vw und vh (Viewport-Breite und Viewport-Höhe): 1 % der Breite oder der Höhe des Browserfensters. Ein Element mit height: 100vh ist so hoch wie das ganze Fenster. In unseren Übungen ist das Fenster die Vorschau.
• rem, das du aus der vorigen Lektion kennst: 1rem ist die Grundschriftgröße, meist 16 Pixel. Es eignet sich für Größen, die mit dem Text wachsen sollen, zum Beispiel wenn ein Besucher in seinem Browser eine größere Schrift einstellt.

Das Element section mit dem Text ist jetzt so breit wie die ganze Seite. Auf einem breiten Bildschirm werden die Textzeilen dadurch sehr lang und schwer lesbar. Machen wir es mit einem Prozentwert schmaler, damit es auf jeden Bildschirm passt.