In den letzten Jahrzehnten hat sich das CSS-Einheitensystem stark weiterentwickelt. Anfangs dominierten absolute Einheiten wie px und pt. Mit dem Aufkommen von Responsive Design wurden relative Einheiten wie em, rem, % und Viewport-Einheiten (vw, vh) entscheidend. Neuere Varianten (dvh, vi, vb) ermöglichen heute flexiblere, kontextbewusste Layouts für verschiedene Geräte und Umgebungen.
Die folgende Übersicht zu den Einheiten ist wie gelistet geliedert:
- Absolute Einheiten
- Relative Einheiten
- Relativ zum Viewport
- Neuere / Spezial-Einheiten
1. Absolute Längeneinheiten
| Einheit | Abkürzung | Bezugsgröße / Definition | Übliche Anwendung / Hinweise |
|---|---|---|---|
px | Pixel | 1px = 1⁄96 Zoll (Standard-Referenz) in CSS Absicht. (MDN Web Docs) | Sehr gebräuchlich für Bildschirme. Stilistisch zuverlässig, aber nicht responsiv. |
pt | Punkt | 1pt = 1⁄72 Zoll. (MDN Web Docs) | Nützlich beim Drucken oder wenn man typografische Maße übernehmen will. Weniger gebraucht im Weblayout. |
pc | Pica | 1pc = 12pt = 1⁄6 Zoll. (MDN Web Docs) | Sehr selten. |
in | Zoll | 1in = 2.54 cm (oder 96px in CSS). (MDN Web Docs) | |
cm | Zentimeter | Physikalische Maßeinheit. (MDN Web Docs) | |
mm | Millimeter | Physikalisch; meist in Print oder spezielle Layouts. (MDN Web Docs) | |
Q | Viertel-Millimeter | 1Q = 1⁄40 cm = 0.25mm. (MDN Web Docs) |
2. Relative Einheiten (lokal / schriftbezogen)
| Einheit | Abkürzung | Bezugsgröße | Besonderheiten / Vor- und Nachteile |
|---|---|---|---|
em | „em“ | Schriftgröße des aktuellen Elements (oder Eltern-Elements, wenn auf font-size angewendet) (MDN Web Docs) | Gut für Abstände, Padding etc., die relativ zur Schrift sein sollen. Nachteil: bei vielen Verschachtelungen kumulieren sich die Werte. |
rem | „root em“ | Schriftgröße des Wurzel-Elements (<html>) (MDN Web Docs) | Konsistent über das ganze Dokument, weniger Überraschungen durch Verschachtelung. Bevorzugt für responsive Schriftgrössen eingesetzt !!! |
ch | — | Breite des Zeichens „0“ (ZERO, U+0030) in der aktuellen Schrift (MDN Web Docs) | Gut, wenn man zeichenbasierte Breite braucht, z. B. für Texte oder Eingabefelder; allerdings Schriftfamilie beeinflusst stark. |
ex | — | Höhe eines kleinen „x“ (x-Höhe) in der aktuellen Schrift (MDN Web Docs) | Kann stark variieren zwischen Fonts, daher weniger verlässlich. |
cap | — | Cap-Height der Schrift – die Höhe der Großbuchstaben (nominal) (MDN Web Docs) | Eher Spezialfall; weniger oft genutzt. |
ic | — | Vollbreite eines „Ideograph full-width“ Zeichens (z. B. Chinesisch/Japanisch etc.) (MDN Web Docs) | Nur relevant bei Fonts mit solchen Glyphen, oder wenn so etwas benötigt wird. |
lh | — | Zeilenhöhe (line-height) des Elements (MDN Web Docs) | Nützlich, z. B. für vertikale Abstände, die zur Zeilenhöhe passen sollen. |
3. Viewport-bezogene Einheiten (Relativ zur Ansicht)
| Einheit | Abkürzung | Bezugsgröße | Typische Anwendung / Bemerkungen |
|---|---|---|---|
vw | Viewport Width | 1vw = 1 % der Breite des Ansichtsfensters (Viewport). (MDN Web Docs) | Ideal für responsive Breiten, Layouts, Texte, die sich proportionell zur Fensterbreite anpassen sollen. |
vh | Viewport Height | 1vh = 1 % der Höhe des Viewports (MDN Web Docs) | Für volle Bildschirmabschnitte, vertikale Zentrierung, etc. |
vmin | — | Wert der kleineren Dimension von vw oder vh (MDN Web Docs) | Wenn man sicher gehen will, dass Größe an die kleinere Seitenlänge gebunden ist (z. B. responsive Infografiken etc.). |
vmax | — | Wert der größeren Dimension von vw oder vh (MDN Web Docs) | Wenn man maximale Ausdehnung will, ohne eine Achse limitiert zu haben. |
vi, vb | — | 1 % der Größe des Viewports in der Inline- bzw. Block-Achse des Root-Elements. (MDN Web Docs) | Neue Einheiten; hilfreich bei Layouts, die sich an Textfluss/Ausrichtung orientieren. |
Dynamische und variant Viewport-Einheiten (dvh, svh, lvh, etc.) | — | beziehen sich auf dynamische/geänderte/sichtbare Viewport-Dimensionen, oder Varianten (small, large) für Benutzerinterfaces etc. (web-platform-dx.github.io) | Noch nicht überall stabil/kompatibel; gut nachschauen (Browser-Support). Verwendet, im Gegesatz zu vw/vh, nur den wirklich zur Verfügung stehenden Teil des Viewport, nicht den Kompletten. |
4. Vergleich & typische Faustregeln
| Situation | Empfohlene Einheit(en) |
|---|---|
| Schriftgröße über das ganze Dokument (basierend auf Benutzer- oder Rootgröße) | rem |
| Lokale Elemente, bei denen Padding/Margin relativ zur Schriftgröße sein sollen | em |
| Fixed Layouts, Icons, Grafiken, wenn absoluter Maßstab benötigt wird | px |
| Layouts, die sich an Fenstergröße anpassen sollen (z. B. Fullscreen-Sektionen) | dvw, dvh, vw, vh, vmin, vmax |
| Typografische Spaltenbreite, Lesbarkeit (z. B. Textbreite in Zeichen) | ch |
| Drucklayouts, physische Maße oder spezialisierte Anforderungen | in, cm, mm, pt |
5.Links
CSS-Tricks: https://css-tricks.com/css-length-units/