CSS-Einheiten-Konvertierungsleitfaden: px, rem, em, vw, vh erklärt

Die Wahl der richtigen CSS-Einheit ist eine der einflussreichsten Entscheidungen beim Schreiben von Stylesheets. Die von Ihnen gewählte Einheit bestimmt, wie Elemente über verschiedene Bildschirmgrößen skalieren, wie sie auf Benutzereinstellungen (wie die Browser-Schriftgröße) reagieren und wie vorhersehbar sich Ihr Layout verhält. Dennoch verwenden viele Entwickler aus Gewohnheit standardmäßig Pixel und verpassen die Flexibilität und Barrierefreiheitsvorteile, die relative Einheiten bieten. Dieser Leitfaden deckt alle wichtigen CSS-Einheiten ab, erklärt, wann jede zu verwenden ist, zeigt, wie man zwischen ihnen konvertiert, und bietet praktische bewährte Praktiken für modernes responsives Design.

CSS-Einheitenkategorien verstehen

CSS-Einheiten fallen in zwei große Kategorien: absolute Einheiten und relative Einheiten. Absolute Einheiten haben eine feste physische Größe, während relative Einheiten ihren berechneten Wert von einem anderen Referenzpunkt ableiten. Das Verständnis dieser Unterscheidung ist grundlegend für fundierte Einheitenentscheidungen.

Absolute Einheiten

Absolute Einheiten sind Maße mit fester Größe. Die am häufigsten verwendete absolute Einheit in der Webentwicklung ist das Pixel (px). Weitere absolute Einheiten sind Punkt (pt), Zentimeter (cm), Millimeter (mm) und Zoll (in). Diese Einheiten werden hauptsächlich für Druck-Stylesheets verwendet oder wenn Sie Maße benötigen, die sich nicht mit dem Kontext ändern. In bildschirmbasiertem CSS ist px die einzige absolute Einheit, die Sie regelmäßig verwenden werden.

Relative Einheiten

Relative Einheiten berechnen ihren endgültigen Wert basierend auf einem Referenzwert. em ist relativ zur Schriftgröße des aktuellen Elements, rem ist relativ zur Schriftgröße des Wurzelelements, vw und vh sind relativ zu den Viewport-Abmessungen und Prozentwerte sind relativ zum übergeordneten Element. Relative Einheiten sind der Eckpfeiler von responsivem und barrierefreiem Design, da sie es Ihrem Layout ermöglichen, sich automatisch an verschiedene Kontexte anzupassen.

Pixel (px): Die Basiseinheit

Pixel sind die intuitivste CSS-Einheit, da sie direkt auf Bildschirmpixel abbilden (mit einigen Einschränkungen bezüglich des Gerätepixelverhältnisses). px-Werte sind unabhängig vom Kontext immer gleich, was sie vorhersehbar und leicht verständlich macht. Diese Vorhersehbarkeit hat jedoch ihren Preis: Pixelbasierte Größen skalieren nicht, wenn Benutzer die Standard-Schriftgröße ihres Browsers ändern, was Barrierefreiheitsprobleme verursacht.

Wann px verwenden

• Rahmenbreite: Ein 1px-Rahmen sollte unabhängig von den Schriftgrößeneinstellungen 1px bleiben.
• Box-Schatten: Schattenversatz und Unschärferadius werden am besten in Pixeln für konsistente visuelle Effekte angegeben.
• Feinkörnige Details: Jeder Wert, bei dem Skalierung das visuelle Design beeinträchtigen würde, wie dünne Trennlinien oder präzise Symbolpositionierung.
• Wurzelschriftgröße: Das Setzen von html { font-size: 16px; } als Basislinie ist ein gängiges Muster, obwohl Sie die Browser-Standardeinstellungen des Benutzers respektieren sollten.

Wann px vermeiden

Vermeiden Sie px für Schriftgrößen, Innenabstände, Außenabstände und Layoutgrößen, die sich an Benutzereinstellungen anpassen sollten. Benutzer, die die Browser-Schriftgröße auf 20px erhöhen, erwarten, dass der gesamte Text entsprechend skaliert, aber px-basierte Schriftgrößen reagieren nicht auf diese Änderung.

rem: Wurzelrelative Größen

). In den meisten Browsern beträgt die Standard-Wurzelschriftgröße 16px, daher ist 1rem = 16px, 0,5rem = 8px, 2rem = 32px. Der entscheidende Vorteil von rem ist, dass es skaliert, wenn Benutzer die Standard-Schriftgröße ihres Browsers ändern, was es zur besten Wahl für Barrierefreiheit macht.

px in rem umrechnen

Die Umrechnungsformel ist einfach: Teilen Sie den Pixelwert durch die Wurzelschriftgröße.

rem = px / root-font-size

// With default root font size of 16px:
12px = 12 / 16 = 0.75rem
16px = 16 / 16 = 1rem
24px = 24 / 16 = 1.5rem
32px = 32 / 16 = 2rem
48px = 48 / 16 = 3rem

Der 62,5%-Trick

Viele Entwickler empfinden die Division durch 16 als umständlich. Ein beliebter Trick besteht darin, die Wurzelschriftgröße auf 62,5% zu setzen, wodurch 1rem gleich 10px wird. Dies vereinfacht das Kopfrechnen: 14px wird zu 1,4rem, 24px wird zu 2,4rem und so weiter.

html {
    font-size: 62.5%; /* 1rem = 10px */
}

body {
    font-size: 1.6rem; /* 16px */
}

h1 {
    font-size: 3.2rem; /* 32px */
    margin-bottom: 1.6rem; /* 16px */
}

em: Kontextrelative Größen

Die em-Einheit ist relativ zur Schriftgröße des aktuellen Elements (oder für andere Eigenschaften als font-size relativ zum übergeordneten Element). Das bedeutet, 1em entspricht der aktuellen Schriftgröße, und em-Werte setzen sich zusammen, wenn Elemente verschachtelt werden. Dieses Zusammensetzungsverhalten kann sowohl mächtig als auch verwirrend sein.

Das Zusammensetzungsproblem

/* Parent: font-size 16px */
.parent {
    font-size: 1em; /* 16px */
}

/* Child: 1.2em of parent's 16px = 19.2px */
.child {
    font-size: 1.2em;
}

/* Grandchild: 1.2em of child's 19.2px = 23.04px */
.grandchild {
    font-size: 1.2em;
}

Jedes verschachtelte Element multipliziert die Schriftgröße, was zu exponentiellem Wachstum führt. Deshalb ist rem im Allgemeinen besser für Schriftgrößen geeignet. em glänzt jedoch in bestimmten Anwendungsfällen, in denen Sie eine Skalierung auf Komponentenebene wünschen.

Wann em verwenden

• Komponenten-Innen- und -Außenabstände: Wenn Sie möchten, dass Abstände mit der Schriftgröße der Komponente skalieren, hält em alles proportional. Wenn Sie die Schriftgröße einer Schaltfläche erhöhen, skalieren ihre Innenabstände automatisch.
• Medienabfrage-Breakpoints: Einige Entwickler bevorzugen em-basierte Breakpoints, da sie mit den Schriftgrößeneinstellungen des Benutzers skalieren und sicherstellen, dass das Layout bei der richtigen Inhaltsbreite umbricht.
• Symbolgrößen innerhalb von Komponenten: In em bemessene Symbole skalieren proportional mit dem umgebenden Text.

Viewport-Einheiten: vw, vh, vmin, vmax

Viewport-Einheiten sind relativ zu den Abmessungen des Browserfensters. 1vw entspricht 1% der Viewport-Breite, 1vh entspricht 1% der Viewport-Höhe. vmin ist das kleinere von vw und vh, vmax das größere. Diese Einheiten sind entscheidend für die Erstellung von Layouts, die auf den verfügbaren Bildschirmplatz reagieren.

Häufige Anwendungsfälle für Viewport-Einheiten

Das mobile vh-Problem

In mobilen Browsern entspricht 100vh nicht immer der sichtbaren Viewport-Höhe. Die Adressleiste und die Navigationssteuerelemente des Browsers nehmen Platz ein, aber 100vh umfasst den Bereich hinter diesen Steuerelementen. Dies führt dazu, dass Inhalte am unteren Rand von Vollhöhenbereichen abgeschnitten werden. Modernes CSS bietet dvh (dynamische Viewport-Höhe) als Lösung, die dynamische Symbolleisten berücksichtigt. Alternativ können Sie JavaScript verwenden, um eine CSS-Benutzerdefinierte Eigenschaft basierend auf window.innerHeight festzulegen.

/* Modern approach */
.hero {
    height: 100dvh; /* Dynamic viewport height */
}

/* Fallback for older browsers */
.hero {
    height: 100vh;
    height: 100dvh;
}

Neue Viewport-Einheiten: svh, lvh, dvh

CSS führte drei neue Viewport-Höheneinheiten ein, um das mobile Viewport-Problem zu lösen:

• svh (Small Viewport Height): Die Viewport-Höhe, wenn alle Browser-UI sichtbar ist (Adressleiste erweitert).
• lvh (Large Viewport Height): Die Viewport-Höhe, wenn die Browser-UI minimiert ist (Adressleiste eingeklappt).
• dvh (Dynamic Viewport Height): Die aktuelle Viewport-Höhe, die sich ändert, wenn sich die Browser-UI ausdehnt oder zusammenzieht.

Dieselben Small-/Large-/Dynamic-Varianten existieren für die Breite (svw, lvw, dvw) und Min-/Max-Einheiten (svmin, lvmin, dvmin usw.). Verwenden Sie dvh für mobile Vollbildlayouts, svh, wenn Sie sicherstellen müssen, dass Inhalte ohne Scrollen sichtbar sind, und lvh, wenn Sie den maximal möglichen Raum füllen möchten.

Fließende Typografie mit clamp()

Die CSS-Funktion clamp() ist ein Game-Changer für responsive Typografie. Sie akzeptiert drei Werte: einen Minimalwert, einen bevorzugten Wert und einen Maximalwert. Der Browser wählt den bevorzugten Wert, begrenzt ihn jedoch auf das Minimum und Maximum.

/* Font size scales from 1rem to 2.5rem based on viewport */
h1 {
    font-size: clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}

/* Padding scales proportionally */
.container {
    padding: clamp(1rem, 3vw, 3rem);
}

Dieser Ansatz bietet Ihnen die Vorteile der Viewport-basierten Skalierung ohne das Risiko, dass Text auf Mobilgeräten zu klein oder auf Desktops zu groß wird. Er eliminiert die Notwendigkeit von Medienabfrage-Breakpoints für Schriftgrößen und reduziert die CSS-Komplexität erheblich.

Konvertierungsreferenztabelle

Verwenden Sie diese Tabelle als Kurzreferenz für gängige Konvertierungen. Alle Werte gehen von einer Wurzelschriftgröße von 16px und einem Viewport von 1920x1080 aus.

Bewährte Praktiken für CSS-Einheiten

• Verwenden Sie rem für Schriftgrößen: Dies ist die wichtigste Regel. Rem-basierte Schriftgrößen respektieren Benutzereinstellungen und skalieren konsistent in der gesamten Anwendung.
• Verwenden Sie em für Komponentenabstände: Innen- und Außenabstände innerhalb von Komponenten profitieren von em, da sie proportional skalieren, wenn sich die Schriftgröße der Komponente ändert.
• Verwenden Sie px für Rahmen und feinkörnige Details: Werte, die nicht mit der Schriftgröße skalieren sollten (wie 1px-Rahmen und Schattenversätze), sollten Pixel verwenden.
• Verwenden Sie Prozentwerte für Layoutbreiten: Flexible Layouts verwenden prozentbasierte Spalten- und Containerbreiten, sodass Inhalte über verschiedene Bildschirmgrößen umfließen können.
• Verwenden Sie Viewport-Einheiten für Vollbildelemente: Hero-Bereiche, Overlays und alles, was den Viewport füllen soll, profitiert von vh und vw.
• Verwenden Sie clamp() für fließende Typografie: Ersetzen Sie Medienabfrage-Breakpoints für Schriftgrößen durch clamp(), um eine sanfte Skalierung zwischen Minimal- und Maximalwerten zu erstellen.
• Setzen Sie die Wurzel-font-size niemals mit px: Verwenden Sie immer Prozentwerte (wie 62,5%) oder behalten Sie die Browser-Standardeinstellung bei. Das Setzen mit Pixeln überschreibt die Barrierefreiheitseinstellungen des Benutzers.
• Bleiben Sie konsistent: Wählen Sie eine Einheitenstrategie für Ihr Projekt und halten Sie sich daran. Zufälliges Mischen von Einheiten macht die Codebasis schwieriger zu warten und zu debuggen.