CSS-Einheiten teilen sich in absolute (fest) und relative (skalieren mit etwas). Die richtige Wahl zu treffen ist der Schlüssel zu responsiven, barrierefreien Layouts.
.x { width: 100px; } /* px — fixed pixels; predictable, doesn't scale */
Verwende für Dinge, die nicht skalieren sollten (Ränder, kleine feste Details).
pxfont-size: 1.5rem; /* rem — relative to the ROOT font-size (html). Consistent. */
font-size: 1.2em; /* em — relative to the PARENT's font-size. Compounds! */
width: 50%; /* % — relative to the parent's size */
width: 50vw; /* vw — 50% of viewport WIDTH */
height: 100vh; /* vh — 100% of viewport HEIGHT */
html { font-size: 16px; }
.parent { font-size: 20px; }
.parent .child { font-size: 2em; } /* 2 × 20 = 40px (relative to parent) */
.parent .other { font-size: 2rem; } /* 2 × 16 = 32px (relative to root) */
em schachtelt sich durch Verschachtelung (ein Kind eines Kindes multipliziert sich), was unerwartet aus dem Ruder laufen kann. rem verweist immer auf den Root, daher ist es vorhersehbar — die erste Wahl für Schriftgrößen und Abstände. Verwende em, wenn du Größen relativ zur lokalen Schrift haben möchtest (z. B. Padding auf einem Button, das mit seinem Text skaliert).
font-size: 16px; /* ❌ ignores the user's browser font-size preference */
font-size: 1rem; /* ✅ scales when the user increases their default size */
Die Verwendung von rem für Typografie respektiert Benutzer, die eine größere Standard-Schriftart einstellen — ein echter Gewinn für die Barrierefreiheit, den px zerstört.
Die richtige Einheit macht Layouts responsiv und barrierefrei: rem für Typografie/Abstände (vorhersehbar + respektiert Benutzereinstellungen), %/vw/vh für fluide Layouts, px für feste Details und em für lokal-relative Größe.
Neuere Viewport-Einheiten (dvh, svh) beheben auch Probleme mit der Höhe der mobilen Adressleiste.