CSS-Einheiten-Referenz
CSS-Längeneinheiten gibt es in zwei Familien: absolute Einheiten, an eine physische Größe gebunden, und relative Einheiten, die mit Schrift, Elternelement oder Viewport skalieren. Für responsives Design greifst du meist zu den relativen — besonders rem, % und den Viewport-Einheiten.
Aktualisiert 2026-07-06
Absolute Einheiten
| Einheit | Bedeutung |
|---|---|
| px | Pixel — die Basiseinheit für Bildschirme. 1px ist ein geräteunabhängiges Pixel. |
| pt | Punkt — 1/72 Zoll. Verbreitet in Druck-Stylesheets. |
| in | Zoll — 1in = 96px = 2,54cm. |
| cm | Zentimeter — meist für den Druck. |
| mm | Millimeter — meist für den Druck. |
| pc | Pica — 1pc = 12pt = 1/6 Zoll. Selten. |
Relative Einheiten
| Einheit | Bedeutung |
|---|---|
| % | Prozentsatz des entsprechenden Werts des Elternelements. |
| em | Relativ zur eigenen Schriftgröße des Elements. 1.5em = das 1,5-Fache der Schriftgröße. |
| rem | Relativ zur Schriftgröße der Wurzel (html). Vorhersagbar für konsistente Skalierung. |
| ex | Die x-Höhe der aktuellen Schrift (selten genutzt). |
| ch | Die Breite des Zeichens '0' in der aktuellen Schrift. |
| vw | 1% der Viewport-Breite. |
| vh | 1% der Viewport-Höhe. |
| vmin | 1% der kleineren Viewport-Dimension (Breite oder Höhe). |
| vmax | 1% der größeren Viewport-Dimension. |
| fr | Ein Bruchteil des freien Raums in einem CSS-Grid-Container. |
em vs. rem: der zentrale Unterschied
Beide skalieren mit der Schriftgröße, aber em ist relativ zur Schriftgröße des aktuellen Elements (es akkumuliert sich also durch verschachtelte Elemente), während rem immer relativ zur Wurzel-Schriftgröße ist (es bleibt also vorhersagbar, egal wie tief verschachtelt). Im Zweifel sorgt rem für Größen und Abstände für die wenigsten Überraschungen.
Verwandte Tools