CSS-Einheiten erklärt: px, rem, em, vh — und wann man welche verwendet
Die falsche CSS-Einheit führt zu Layouts, die bei verschiedenen Bildschirmgrößen kaputt gehen, zu Schriftarten, die Benutzereinstellungen ignorieren, und zu Abständen, die sich inkonsistent anfühlen. Hier ist ein praktischer Leitfaden zur Auswahl der richtigen Einheit für jedes Szenario.
Warum CSS-Einheiten wichtig sind
CSS verfügt über mehr als ein Dutzend Längeneinheiten, aber die meisten Entwickler verwenden in der Praxis fünf: px, rem, em, % und die Viewport-Einheiten vh und vw. Eine falsche Wahl ist nicht immer offensichtlich – das Layout könnte auf Ihrem Bildschirm gut aussehen und bei jemand anderem kaputtgehen, oder die visuelle Qualität bestehen, aber bei einer Barrierefreiheitsprüfung durchfallen, weil es die Schriftgrößen-Präferenz des Benutzers im Browser ignoriert.
Dieser Leitfaden erklärt, was jede Einheit tatsächlich misst, gibt Ihnen eine konkrete Entscheidungsregel für jede Situation und behandelt die Fehler, die immer wieder in Code-Reviews auftauchen.
px — Absolute Pixel
Ein CSS px entspricht einem geräteunabhängigen Pixel, nicht unbedingt einem physischen Bildschirmpixel. Auf einem 2x Retina-Display wird ein CSS px mit 2 physischen Pixeln gerendert. Das bedeutet, dass px in Bezug auf die visuelle Größe über verschiedene Bildschirme hinweg konsistent ist, aber es ist absolut — es skaliert mit nichts.
Wann px verwenden:
- Rahmen:
border: 1px solid— ein 1px Rahmen sollte immer wie eine dünne Linie aussehen, unabhängig vom Kontext - Box-Shadows und Outlines: Präzise Details, die nicht skalieren sollten
- Media-Query-Breakpoints: <
@media (min-width: 768px) - Dekorative Elemente mit fester Größe (Icons mit definierter Größe, Trennlinien)
Wann px nicht verwenden: Schriftgrößen, Padding und Margin. Ein Benutzer, der seine Browser-Schriftgröße auf 20px einstellt, weil er Schwierigkeiten beim Lesen von kleinem Text hat, wird nicht von Ihrem Layout profitieren, wenn alles hartcodiert in px vorliegt. Seine Präferenz wird völlig ignoriert.
rem — Root Em
<rem steht für "root em." Es ist immer relativ zur <font-size> des <html>-Elements, niemals zum Elternelement. Dies macht es vorhersehbar auf eine Weise, die <em> nicht bietet.
Standardmäßig setzen die meisten Browser die Root-Schriftgröße auf 16px. Also:
1rem = 16px | 1.5rem = 24px | 0.875rem = 14px
Wann rem verwenden:
- Schriftgrößen — rem respektiert die Browser-Schriftpräferenz des Benutzers
- Abstände, die konsistent mit der Schriftgröße skalieren sollen (padding, margin, gap)
- Komponentengrößen, wenn Sie möchten, dass alles zusammen skaliert
Der 62.5% Trick: Einige Entwickler setzen <html { font-size: 62.5%; }, um 1rem gleich 10px zu machen (da 62.5% von 16px = 10px sind). Dies vereinfacht die Kopfrechenarbeit: <1.4rem = 14px. Der Nachteil ist, dass es die Basis-Schriftpräferenz des Benutzers überschreibt, sofern Sie es nicht vorsichtig anwenden — tun Sie dies nur, wenn Sie die Auswirkungen auf die Barrierefreiheit verstehen und die Überschreibung auf Komponentenebene vornehmen.
em — Relativ zum Elternteil
<em ist relativ zur berechneten Schriftgröße des aktuellen Elements (oder zum Elternteil, wenn es selbst auf die font-size angewendet wird). Dies macht es nützlich für Komponenten, die proportional zu ihrer eigenen Textgröße skalieren müssen.
Klassischer Anwendungsfall: Button-Padding. Wenn Sie <padding: 0.5em 1em schreiben, skaliert das Padding des Buttons automatisch, wenn Sie die Schriftgröße des Buttons ändern — kleine Buttons erhalten ein kleineres Padding, große Buttons mehr.
.btn { font-size: 1rem; padding: 0.5em 1em; }
.btn-lg { font-size: 1.25rem; /* padding skaliert automatisch */ }
Das Problem der Zusammenzählung (Compounding): Wenn Sie Elemente mit em-Schriftgrößen verschachteln, multiplizieren sie sich. Ein Elternteil bei <1.2em und ein Kind bei <1.2em geben dem Kind eine effektive Größe von <1.44em>. Deshalb wird rem in den meisten Fällen für Schriftgrößen bevorzugt — rem bezieht sich immer auf die Wurzel, sodass Verschachtelungen nicht zusammenschlagen.
Wann em verwenden: Padding, Margin und Line-Height bei Komponenten, bei denen Sie möchten, dass die Größen der eigenen Schriftgröße der Komponente folgen. Vermeiden Sie em für die Schriftgröße in verschachtelten Komponenten.
% — Prozent
Prozent ist immer relativ zur entsprechenden Dimension des Elternelements. Breite-Prozentsätze sind relativ zur Elternbreite; Höhen-Prozentsätze sind relativ zur Elternhöhe (mit Einschränkungen).
Es ist besonders nützlich für fluide Layouts: <width: 100% bedeutet "nimm die gesamte verfügbare Breite ein." In Kombination mit max-width erstellt es responsive Container:
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
Bei der Schriftgröße verhält sich Prozent wie em — es multipliziert sich mit dem Elternteil. Verwenden Sie stattdessen rem für vorhersehbarere Ergebnisse.
vh, vw — Viewport-Einheiten
<1vh = 1% der Viewport-Höhe. <1vw = 1% der Viewport-Breite. Diese hängen von keinem Element ab — sie beziehen sich immer auf die Größe des Browserfensters.
Wann Viewport-Einheiten verwenden:
- Full-Screen-Bereiche: <
height: 100vhfür einen Hero-Bereich, der den Bildschirm genau ausfüllt - Fluide Typografie: <
font-size: clamp(1rem, 2.5vw, 2rem)für Text, der ohne Media Queries flüssig zwischen Bildschirmgrößen skaliert - Full-Width-Bilder oder Videos: <
width: 100vwum aus einem Container auszubrechen
Das Problem der mobilen Browserleiste: In mobilen Browsern erscheint und verschwindet die Adressleiste beim Scrollen, was die Viewport-Höhe verändert. <100vh kann dazu führen, dass Inhalte abgeschnitten werden oder Scrollbalken erzeugt werden. CSS hat <dvh (dynamic viewport height), <svh (small — Adressleiste sichtbar) und <lvh (large — Adressleiste versteckt) hinzugefügt, um dies zu handhaben. Die Browserunterstützung für dvh ist ab 2024+ gut. Verwenden Sie <height: 100dvh für Full-Screen-Layouts auf Mobilgeräten.
Der Entscheidungshilfen für CSS-Einheiten
| Was Sie dimensionieren | Verwenden Sie dies | Warum |
|---|---|---|
| Body / globale Schriftgröße | rem> | Respektiert Benutzerpräferenz, keine Zusammenzählung |
| Komponenten-Schriftgröße | rem> | Konsistent, vorhersehbar |
| Komponenten-Padding / Margin | em oder <rem> | em, wenn es der Schriftgröße folgen soll; rem für Konsistenz |
| Rahmen, Box-Shadows | <px> | Sollten niemals skalieren |
| Media-Query-Breakpoints | <px oder <em> | px für Einfachheit; em, damit Breakpoints mit Schriftpräferenzen skalieren |
| Fluide Containerbreite | <% + <max-width> | Nutzt verfügbaren Platz, gedeckelt auf Maximum |
| Full-Height-Hero-Bereich | <100dvh> | Berücksichtigt mobile Browserleisten |
| Fluide Typografie | <clamp() mit rem + vw | Skaliert flüssig zwischen Breakpoints |
Die häufigsten Fehler
1. Verwendung von px für alle Schriftgrößen. Dies schadet der Barrierefreiheit. Benutzer, die ihre Basis-Schriftgröße im Browser erhöhen, werden feststellen, dass Ihr Text unverändert bleibt. Verwenden Sie rem für Schriftgrößen, damit die UI diese Präferenz respektiert.
2. Verwendung von em für Schriftgrößen in verschachtelten Komponenten. Hier trifft das Problem der Zusammenzählung zu. Ein Menü innerhalb einer Card innerhalb eines Modals kann am Ende eine 3-fache Zusammenzählung aufweisen. Verwenden Sie rem für Schriftgrößen.
3. Verwendung von vh für Full-Screen-Layouts ohne dvh-Fallback. Auf Mobilgeräten verursacht die Adressleiste Layout-Verschiebungen. Verwenden Sie <min-height: 100svh oder <height: 100dvh>.
4. Vergessen, dass %-Höhen ein Elternteil mit expliziter Höhe erfordern. <height: 100% auf einem Kind hat keine Wirkung, wenn das Elternteil <height: auto> hat. Verwenden Sie stattdessen <vh> oder Flexbox.
Die px → rem Umrechnungsformel
Die Standard-Root-Schriftgröße ist 16px. Die Formel zur Umrechnung:
Beispiel: <
24px ÷ 16 = 1.5rem
Wenn Sie mit einem Design-Tool arbeiten, das Pixel ausgibt, erledigt unser PX zu REM Konverter die Mathematik sofort für Sie. Fügen Sie einen beliebigen px-Wert (oder eine Liste von Werten) ein und erhalten Sie den rem-Äquivalent, mit Unterstützung für benutzerdefinierte Root-Größen.
px zu rem sofort umrechnen
Fügen Sie einen beliebigen Pixelwert ein und erhalten Sie das rem-Äquivalent. Unterstützt benutzerdefinierte Basis-Schriftgrößen.