CSS-Einheiten sind Pixel, em, rem, Prozent und die Viewport-Einheiten. Welche wofür passt, entscheidet mit darüber, ob eine Seite beim Zoomen zusammenhält.
- CSS-Einheiten
Die Maßeinheiten, in denen Längen und Größen angegeben werden.
Beispiel: „Eine CSS-Einheit ist entweder absolut oder bezieht sich auf etwas anderes.“
Absolut und relativ
px ist fest. em bezieht sich auf die Schriftgröße des Elements, rem auf die des Wurzelelements. % bezieht sich je nach Eigenschaft auf Breite oder Höhe des Elternelements. vw und vh auf das Fenster, ch auf die Breite einer Ziffer.
Warum rem für Schrift
Wer im Browser die Standardschriftgröße hochsetzt, weil er schlecht sieht, erwartet, dass die Seite mitwächst. Mit px passiert nichts, mit rem skaliert alles. Bei em multiplizieren sich Verschachtelungen, was in tiefen Strukturen unübersichtlich wird.
Für Abstände sind rem ebenfalls brauchbar, weil sie mit der Schrift wachsen. Für Rahmenbreiten und Haarlinien bleibt px.