Was ist der Unterschied zwischen px und rem in CSS?

Pixel (px) sind Einheiten mit fester Größe, die sich nicht nach Benutzerpräferenzen skalieren, während rem-Einheiten relativ zur Root-Schriftgröße sind und automatisch skalieren, wenn Benutzer die Standardschriftgröße ihres Browsers für Barrierefreiheit ändern.

Wann sollte ich vh- und vw-Einheiten in CSS verwenden?

Verwende vh und vw für Elemente, die relativ zum Viewport skalieren sollen, wie z.B. Vollbild-Hero-Bereiche (100vh), fließende Typografie und Layouts, die sich an die Browserfenstergröße anpassen müssen.

Welche CSS-Einheit ist am besten für Schriftgrößen?

Verwende rem für Schriftgrößen, weil es die Schriftgrößenpräferenzen des Browsers des Benutzers für Barrierefreiheit respektiert und gleichzeitig konsistente Proportionen im gesamten Design beibehält.

px vs rem vs em vs vh: Welche CSS-Einheit solltest du wirklich verwenden?

Einführung: Warum CSS-Einheiten wichtig sind

CSS-Einheiten bestimmen die Größe jedes Elements auf deiner Webseite -- von Schriftgrößen und Abständen bis hin zu Layoutmaßen und Animationen. Die richtige Einheit für den richtigen Kontext zu wählen ist eine der wichtigsten Entscheidungen beim responsiven, barrierefreien Webdesign.

Falsche Einheiten führen zu Layouts, die auf unterschiedlichen Bildschirmgrößen brechen, zu Text, der auf Mobilgeräten zu klein zum Lesen ist, und zu Designs, die die Barrierefreiheitseinstellungen der Benutzer nicht berücksichtigen. Die richtigen Einheiten schaffen flexible, responsive Oberflächen, die sich elegant an jedes Gerät anpassen und Benutzereinstellungen respektieren.

Dieser Leitfaden behandelt alle CSS-Einheiten, die du 2026 kennen musst, mit praktischen Empfehlungen, wann und wie du jede einzelne verwenden solltest. Wenn du zwischen verschiedenen Maßeinheiten konvertieren musst, probiere unser Einheitenkonverter-Tool.

Absolute Einheiten

Absolute Einheiten stellen feste Maße dar. Sie ändern sich nicht basierend auf dem übergeordneten Element, dem Viewport oder Benutzereinstellungen.

Pixel (px)

Pixel sind die am häufigsten verwendete absolute Einheit in der Webentwicklung. Ein CSS-Pixel entspricht einem Gerätepixel auf einem Standarddichtebildschirm, aber auf hochauflösenden (Retina-)Displays kann ein CSS-Pixel mehreren Gerätepixeln entsprechen.

.box {
  width: 300px;
  height: 200px;
  border: 1px solid #333;
  padding: 16px;
}

Wann Pixel verwenden:

Rahmen und Umrisse (border: 1px solid black)
Box-Schatten (box-shadow: 0 2px 4px rgba(0,0,0,0.1))
Feine visuelle Details, die nicht skalieren sollen
Media-Query-Breakpoints (@media (min-width: 768px))
Elemente mit fester Größe wie Icons

Wann Pixel NICHT verwenden:

Schriftgrößen (stattdessen rem verwenden)
Abstände und Innenabstände (stattdessen rem oder em verwenden)
Layout-Breiten (Prozentsätze, fr oder Viewport-Einheiten verwenden)
Alles, was auf Benutzer-Schriftgrößenpräferenzen reagieren soll

Weitere absolute Einheiten

Einheit	Beschreibung	Äquivalent	Anwendungsfall
`px`	Pixel	1px	Bildschirmelemente
`cm`	Zentimeter	37,8px	Druckstylesheets
`mm`	Millimeter	3,78px	Druckstylesheets
`in`	Zoll	96px	Druckstylesheets
`pt`	Punkt	1,33px (1/72 Zoll)	Druckstylesheets
`pc`	Pica	16px (1/6 Zoll)	Druckstylesheets

Hinweis: Physikalische Einheiten (cm, mm, in, pt, pc) sind nur in Druckstylesheets sinnvoll. Auf Bildschirmen werden sie einfach mit dem Standard-96-DPI-Verhältnis in Pixel umgerechnet.

/* Druckstylesheet mit physikalischen Einheiten */
@media print {
  body {
    font-size: 12pt;
    margin: 1in;
  }

  h1 {
    font-size: 18pt;
    margin-bottom: 0.5cm;
  }
}

Relative Einheiten: Schriftbasiert

Relative Einheiten werden basierend auf einem anderen Wert berechnet -- der Schriftgröße des übergeordneten Elements, der Root-Schriftgröße oder den Viewport-Abmessungen. Sie sind für responsives Design unverzichtbar.

rem (Root-em)

rem steht für "root em" und ist relativ zur Schriftgröße des Root-Elements (<html>). Standardmäßig setzen Browser die Root-Schriftgröße auf 16px, sodass 1rem = 16px.

html {
  font-size: 16px; /* Das ist der Browser-Standard */
}

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

p {
  font-size: 1rem;     /* 16px */
  line-height: 1.5rem; /* 24px */
  margin-bottom: 1rem; /* 16px */
}

.card {
  padding: 1.5rem;     /* 24px */
  border-radius: 0.5rem; /* 8px */
}

Warum rem die beste Einheit für die meisten Dinge ist:

Respektiert Benutzerpräferenzen: Wenn ein Benutzer seine Browser-Schriftgröße auf 20px setzt (für Barrierefreiheit), skalieren alle rem-basierten Werte proportional
Konsistent: Anders als em referenziert rem immer den Root, also gibt es keinen Compounding-Effekt
Vorhersehbar: Einfach zu berechnen -- wenn Root 16px ist, sind 1.5rem immer 24px

Der 62,5%-Trick (mit Vorsicht verwenden):

/* Macht rem-Berechnungen einfacher: 1rem = 10px */
html {
  font-size: 62.5%; /* 62,5% von 16px = 10px */
}

body {
  font-size: 1.6rem; /* Zurück auf 16px-Äquivalent */
}

h1 {
  font-size: 3.2rem; /* 32px */
}

.spacing {
  padding: 2.4rem;   /* 24px */
}

Diese Technik vereinfacht Berechnungen, kann aber Probleme mit Drittanbieter-Komponenten verursachen, die die Standard-Root-Schriftgröße voraussetzen. Mit Bedacht einsetzen.

em (Relativ zum übergeordneten Element)

em ist relativ zur Schriftgröße des Elements selbst (für schriftbezogene Eigenschaften) oder zum übergeordneten Element (für andere Eigenschaften). Dies macht es nützlich für das Skalieren auf Komponentenebene, kann aber durch Compounding tückisch sein.

.parent {
  font-size: 18px;
}

.child {
  font-size: 1.2em;  /* 18px * 1.2 = 21.6px */
  padding: 1em;      /* 21.6px (relativ zur eigenen Schriftgröße) */
}

.grandchild {
  font-size: 1.2em;  /* 21.6px * 1.2 = 25.92px -- Compounding! */
}

Das Compounding-Problem:

/* Jede verschachtelte Ebene wird größer */
ul { font-size: 1.1em; }

/*
  Ebene 1: 16px * 1.1 = 17,6px
  Ebene 2: 17,6px * 1.1 = 19,36px
  Ebene 3: 19,36px * 1.1 = 21,3px
  Ebene 4: 21,3px * 1.1 = 23,4px
  -- Text wird mit jeder Verschachtelung größer!
*/

Wann em wirklich nützlich ist:

em glänzt, wenn du möchtest, dass Abstände mit der eigenen Schriftgröße des Elements skalieren. Das ist besonders nützlich für Buttons und Inline-Komponenten:

/* Button, der proportional skaliert */
.button {
  font-size: 1rem;       /* Basisgröße vom Root */
  padding: 0.5em 1em;    /* Skaliert mit font-size */
  border-radius: 0.25em; /* Skaliert mit font-size */
}

.button--large {
  font-size: 1.25rem;    /* Alles andere skaliert automatisch */
}

.button--small {
  font-size: 0.875rem;   /* Padding und Radius skalieren auch */
}

Vergleich: rem vs. em

Aspekt	rem	em
Referenz	Root-Element-Schriftgröße	Elternteil/eigene Schriftgröße
Compounding	Nein	Ja
Vorhersehbarkeit	Hoch	Niedriger (kontextabhängig)
Am besten für	Schriftgrößen, Abstände, Layout	Proportionale Skalierung auf Komponentenebene
Barrierefreiheit	Respektiert Root-Schriftgröße	Respektiert Eltern-Schriftgröße

ch (Zeichenbreite)

ch entspricht der Breite des "0" (Null)-Zeichens in der aktuellen Schriftart. Nützlich, um die Textbreite auf eine lesbare Zeilenlänge zu begrenzen.

/* Optimale Lesebreite */
.article-content {
  max-width: 65ch;  /* Ungefähr 65 Zeichen pro Zeile */
  margin: 0 auto;
}

/* Eingabefeld für erwarteten Inhalt dimensioniert */
.zip-code-input {
  width: 6ch;  /* Breit genug für 5 Stellen + etwas Polster */
}

.phone-input {
  width: 15ch;
}

Warum ch für die Lesbarkeit wichtig ist: Forschung legt nahe, dass die optimale Zeilenlänge zum Lesen 45-75 Zeichen beträgt. Mit ch-Einheiten lässt sich das unabhängig von der Schriftgröße leicht durchsetzen.

ex (x-Höhe)

ex entspricht der Höhe des Kleinbuchstaben "x" in der aktuellen Schriftart. Selten direkt verwendet, kann aber für präzise vertikale Ausrichtung nützlich sein.

/* Icon vertikal mit Text zentrieren */
.icon-inline {
  height: 1ex;
  vertical-align: middle;
}

lh und rlh (Zeilenhöhen-Einheiten)

lh entspricht der berechneten line-height des Elements, während rlh der Zeilenhöhe des Root-Elements entspricht.

/* Elemente mit Zeilenhöhen-Vielfachen abstanden */
.paragraph {
  margin-bottom: 1lh; /* Ein Zeilen-Abstand */
}

.section {
  margin-bottom: 2rlh; /* Zwei Root-Zeilenhöhen Abstand */
}

cap, ic und weitere fortgeschrittene Einheiten

Einheit	Beschreibung	Anwendungsfall
`cap`	Höhe von Großbuchstaben	Ausrichtung mit Großbuchstaben-Text
`ic`	Breite des CJK-"Wasser"-Ideographen	CJK-Typografie
`lh`	Zeilenhöhe des Elements	Vertikaler Rhythmus
`rlh`	Root-Zeilenhöhe	Konsistente vertikale Abstände

Viewport-Einheiten

Viewport-Einheiten sind relativ zum Browser-Viewport (dem sichtbaren Bereich der Webseite).

vw und vh (Viewport-Breite und -Höhe)

/* Vollbild-Hero-Bereich */
.hero {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive Typografie */
h1 {
  font-size: 5vw; /* Skaliert mit Viewport-Breite */
}

Wichtig: 100vh auf mobilen Browsern berücksichtigt nicht die Adressleiste und Navigation des Browsers. Das führte zur Erstellung neuer Viewport-Einheiten.

Das mobile Viewport-Problem

Auf mobilen Browsern ändert sich die Viewport-Höhe, wenn die Adressleiste beim Scrollen ein- und ausgeblendet wird. Die alte vh-Einheit basiert auf dem größtmöglichen Viewport (Adressleiste versteckt), was dazu führt, dass Inhalte abgeschnitten werden, wenn die Adressleiste sichtbar ist.

dvh, svh, lvh (Dynamische, kleine und große Viewport-Höhe)

CSS bietet jetzt drei Varianten für den mobilen Viewport:

/* svh: Kleine Viewport-Höhe (Adressleiste sichtbar) */
.safe-full-height {
  height: 100svh; /* Wird nie hinter der Adressleiste abgeschnitten */
}

/* lvh: Große Viewport-Höhe (Adressleiste versteckt) */
.max-full-height {
  height: 100lvh; /* Maximale Höhe wenn Adressleiste versteckt ist */
}

/* dvh: Dynamische Viewport-Höhe (ändert sich mit der Adressleiste) */
.dynamic-full-height {
  height: 100dvh; /* Passt sich in Echtzeit an */
}

Was verwenden:

svh: Sicherer Standard -- Inhalt ist immer vollständig sichtbar
lvh: Wenn maximale Höhe gewünscht ist
dvh: Wenn die Höhe mit der Adressleiste animieren soll

Dasselbe gilt für Breiten-Einheiten: svw, lvw, dvw.

vi und vb (Viewport Inline und Block)

Diese Einheiten sind schreibmodus-bewusst:

vi = Viewport-Größe in Inline-Richtung (Breite für horizontalen Text, Höhe für vertikalen Text)
vb = Viewport-Größe in Block-Richtung (Höhe für horizontalen Text, Breite für vertikalen Text)

/* Schreibmodus-bewusstes Layout */
.container {
  max-inline-size: 90vi;   /* 90% des Viewports in Inline-Richtung */
  margin-block: 5vb;        /* 5% des Viewports in Block-Richtung */
}

vmin und vmax

vmin = der kleinere von vw und vh
vmax = der größere von vw und vh

/* Quadratisches Element, das in jeden Viewport passt */
.square {
  width: 50vmin;
  height: 50vmin;
}

/* Typografie, die in beiden Ausrichtungen gut skaliert */
h1 {
  font-size: 8vmin; /* Funktioniert in Portrait und Landscape */
}

Viewport-Einheiten Vergleich

Einheit	Beschreibung	Mobile Adressleiste
`vw`	1% der Viewport-Breite	Nicht betroffen
`vh`	1% der Viewport-Höhe	Nutzt großen Viewport
`svh`	1% der kleinen Viewport-Höhe	Immer sicher
`lvh`	1% der großen Viewport-Höhe	Maximale Höhe
`dvh`	1% der dynamischen Viewport-Höhe	Animiert mit der Leiste
`vmin`	Kleiner von vw/vh	Erbt von vh
`vmax`	Größer von vw/vh	Erbt von vh

Prozentsatz (%)

Prozentsätze sind relativ zur entsprechenden Eigenschaft des übergeordneten Elements. Die Referenz ändert sich je nach der Eigenschaft, die du setzt.

.parent {
  width: 800px;
  font-size: 20px;
  line-height: 1.5;
}

.child {
  width: 50%;        /* 400px (50% der Eltern-Breite) */
  margin-left: 10%;  /* 80px (10% der Eltern-Breite) */
  font-size: 80%;    /* 16px (80% der Eltern-Schriftgröße) */
  padding: 5%;       /* 40px (5% der Eltern-BREITE, nicht Höhe!) */
}

Wichtiger Stolperstein: Vertikale Padding- und Margin-Prozentsätze werden basierend auf der Breite des Elternelements berechnet, nicht auf der Höhe. Das ist tatsächlich nützlich für die Erstellung von Seitenverhältnis-Boxen (obwohl die aspect-ratio-Eigenschaft jetzt bevorzugt wird).

/* Alter Seitenverhältnis-Hack mit Prozentsatz-Padding */
.video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Seitenverhältnis */
}

/* Moderner Ansatz */
.video-container {
  width: 100%;
  aspect-ratio: 16 / 9;
}

Container-Query-Einheiten

Container-Query-Einheiten sind relativ zur Größe eines Query-Containers und ermöglichen wirklich komponentenbasiertes responsives Design.

cqw, cqh, cqi, cqb, cqmin, cqmax

.card-container {
  container-type: inline-size;
  container-name: card;
}

.card-title {
  font-size: clamp(1rem, 4cqi, 2rem); /* Skaliert mit Container-Inline-Größe */
}

.card-description {
  font-size: clamp(0.875rem, 3cqi, 1.125rem);
}

Einheit	Beschreibung
`cqw`	1% der Container-Breite
`cqh`	1% der Container-Höhe
`cqi`	1% der Container-Inline-Größe
`cqb`	1% der Container-Block-Größe
`cqmin`	Kleiner von cqi und cqb
`cqmax`	Größer von cqi und cqb

Die fr-Einheit (Bruchzahl)

Die fr-Einheit wird ausschließlich in CSS-Grid verwendet, um verfügbaren Platz proportional zu verteilen.

.grid {
  display: grid;

  /* Drei Spalten: 1 Teil, 2 Teile, 1 Teil */
  grid-template-columns: 1fr 2fr 1fr;
  /* Bei 1200px Container: 300px, 600px, 300px */

  /* Gemischte Einheiten: feste Seitenleiste, flexibler Inhalt */
  grid-template-columns: 250px 1fr;

  /* Mehrere Zeilen */
  grid-template-rows: auto 1fr auto;
  /* Header, flexibler Inhaltsbereich, Footer */

  gap: 1rem;
}

/* Responsives Grid mit fr-Einheiten */
.product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
}

fr vs. Prozentsätze in Grid:

/* Diese sehen ähnlich aus, verhalten sich aber unterschiedlich */
.grid-percent {
  grid-template-columns: 25% 50% 25%;
  gap: 1rem;
  /* Spalten + Abstände > 100%, verursacht Überlauf! */
}

.grid-fr {
  grid-template-columns: 1fr 2fr 1fr;
  gap: 1rem;
  /* fr-Einheiten berücksichtigen den Abstand automatisch */
}

CSS-Funktionen mit Einheiten

clamp() - Responsive Werte mit Einschränkungen

clamp() ist eine der leistungsstärksten CSS-Funktionen für responsives Design. Sie nimmt drei Werte: Minimum, bevorzugt und Maximum.

/* Responsive Schriftgröße, die nie zu klein oder zu groß wird */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* Minimum: 1.5rem (24px)
     Bevorzugt: 4vw (skaliert mit Viewport)
     Maximum: 3rem (48px) */
}

/* Responsive Container-Breite */
.container {
  width: clamp(320px, 90%, 1200px);
}

/* Responsive Abstände */
section {
  padding: clamp(1rem, 5vw, 4rem);
}

min() und max()

/* Breite ist das Kleinere von 90% oder 1200px */
.container {
  width: min(90%, 1200px);
}

/* Mindestens 300px breit, kann aber wachsen */
.sidebar {
  width: max(300px, 25%);
}

/* Für komplexe responsive Werte kombinieren */
.card {
  width: min(100% - 2rem, 600px);
  padding: max(1rem, 2vw);
}

calc() - Arithmetik mit Einheiten

calc() ermöglicht das Mischen verschiedener Einheiten in Berechnungen:

.sidebar-layout {
  /* Volle Breite minus Seitenleiste */
  .main-content {
    width: calc(100% - 280px);
  }

  /* Zentriert mit max-width und auto-Margins */
  .content {
    width: calc(100% - 2 * 1.5rem);
    max-width: 800px;
    margin: 0 auto;
  }
}

/* Fließende Typografie mit calc */
h1 {
  /* Basisgröße + Skalierungsfaktor */
  font-size: calc(1.5rem + 1.5vw);
}

/* Viewport-basierte Abstände mit Minimum */
.hero {
  padding-top: calc(2rem + 5vh);
  padding-bottom: calc(2rem + 5vh);
}

Praktische Empfehlungen: Welche Einheit wann?

Schriftgrößen

/* Root-Schriftgröße: Prozentsatz oder px verwenden */
html {
  font-size: 100%; /* Respektiert Browser-Einstellungen des Benutzers */
}

/* Alle anderen Schriftgrößen: rem verwenden */
body { font-size: 1rem; }       /* 16px */
h1 { font-size: 2.5rem; }      /* 40px */
h2 { font-size: 2rem; }        /* 32px */
h3 { font-size: 1.5rem; }      /* 24px */
small { font-size: 0.875rem; } /* 14px */

/* Responsive Schriftgrößen: clamp mit rem und vw verwenden */
h1 {
  font-size: clamp(2rem, 5vw, 3.5rem);
}

Abstände (Padding, Margin, Gap)

/* rem für konsistente Abstände verwenden */
.card {
  padding: 1.5rem;
  margin-bottom: 2rem;
}

.grid {
  gap: 1.5rem;
}

/* em für Abstände, die mit Schriftgröße skalieren sollen */
.button {
  padding: 0.5em 1em;
}

Layout-Breiten

/* Prozentsatz, fr oder Viewport-Einheiten verwenden */
.container {
  width: min(90%, 1200px);
  margin: 0 auto;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

/* Vollbreite-Abschnitte */
.hero {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

Rahmen und Schatten

/* px für feine visuelle Details verwenden */
.card {
  border: 1px solid #e0e0e0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem; /* rem für border-radius ist auch OK */
}

Media Queries

/* px oder em für Breakpoints verwenden */
@media (min-width: 768px) {
  /* Tablet und größer */
}

@media (min-width: 1024px) {
  /* Desktop und größer */
}

/* em-basierte Breakpoints respektieren Benutzer-Zoom */
@media (min-width: 48em) {
  /* 48em = 768px bei Standard-Schriftgröße */
}

Vollständige Empfehlungstabelle

Anwendungsfall	Empfohlene Einheit	Begründung
Schriftgrößen	`rem`	Respektiert Benutzerpräferenzen, kein Compounding
Responsive Schriftgrößen	`clamp(rem, vw, rem)`	Skaliert gleichmäßig mit Einschränkungen
Abstände (Padding, Margin)	`rem`	Konsistent, skaliert mit Root-Schrift
Button-Padding	`em`	Skaliert mit Buttons eigener Schriftgröße
Container-Breiten	`%`, `min()`, `clamp()`	Flexibel und responsiv
Grid-Spalten	`fr`	Verteilt Platz proportional
Zeilenlänge	`ch`	Optimiert Lesbarkeit
Rahmen	`px`	Feine Details, sollten nicht skalieren
Box-Schatten	`px`	Feine Details, einheitliches Erscheinungsbild
Vollbild-Abschnitte	`dvh`	Berücksichtigt mobile Adressleiste
Media-Query-Breakpoints	`px` oder `em`	Konsistente Auslösepunkte
Border-Radius	`rem` oder `px`	Beides funktioniert; `rem` skaliert leicht

Barrierefreiheit und CSS-Einheiten

Die Wahl der richtigen CSS-Einheiten hängt direkt mit der Barrierefreiheit zusammen.

Benutzer-Schriftgröße-Einstellungen respektieren

Benutzer können die Standard-Schriftgröße ihres Browsers für bessere Lesbarkeit erhöhen. Durch die Verwendung von rem für Schriftgrößen und Abstände wird diese Präferenz respektiert:

/* Gut: Skaliert mit Benutzer-Schriftgröße-Präferenzen */
body { font-size: 1rem; }
h1 { font-size: 2.5rem; }
.container { padding: 1.5rem; }

/* Schlecht: Ignoriert Benutzerpräferenzen */
body { font-size: 16px; }
h1 { font-size: 40px; }
.container { padding: 24px; }

Zoom-Unterstützung

Benutzer sollten auf 200% zoomen können, ohne horizontales Scrollen (WCAG 2.1 Erfolgskriterium 1.4.10):

/* Gut: Responsiv bei jedem Zoom-Level */
.content {
  max-width: min(90%, 65ch);
  margin: 0 auto;
  padding: 1.5rem;
}

/* Schlecht: Feste Breite bricht bei hohem Zoom */
.content {
  width: 960px;
  margin: 0 auto;
  padding: 24px;
}

Touch-Ziele

Interaktive Elemente sollten mindestens 44x44 CSS-Pixel sein (WCAG 2.5.5):

.button {
  min-height: 2.75rem; /* 44px */
  min-width: 2.75rem;
  padding: 0.75rem 1.5rem;
}

/* Ausreichend Abstand zwischen Touch-Zielen sicherstellen */
.nav-list li + li {
  margin-top: 0.5rem;
}

Häufige Fehler und wie man sie vermeidet

Fehler 1: px für Schriftgrößen verwenden

/* Schlecht: Skaliert nicht mit Benutzerpräferenzen */
body { font-size: 16px; }
h1 { font-size: 32px; }

/* Gut: Skaliert mit Benutzerpräferenzen */
body { font-size: 1rem; }
h1 { font-size: 2rem; }

Fehler 2: vh für Vollhöhe-Mobile-Layouts verwenden

/* Schlecht: Wird hinter mobiler Adressleiste abgeschnitten */
.mobile-layout { height: 100vh; }

/* Gut: Berücksichtigt mobile Adressleiste */
.mobile-layout { height: 100dvh; }

/* Am sichersten: Fallback für ältere Browser */
.mobile-layout {
  height: 100vh;
  height: 100dvh;
}

Fehler 3: em-Werte compounding

/* Schlecht: Schriftgröße wächst mit Verschachtelung */
li { font-size: 1.1em; }

/* Gut: Konsistent unabhängig von Verschachtelung */
li { font-size: 1.1rem; }

Fehler 4: vw für Schriftgrößen ohne Einschränkungen verwenden

/* Schlecht: Zu klein auf mobil, zu groß auf Desktop */
h1 { font-size: 5vw; }

/* Gut: Mit clamp einschränken */
h1 { font-size: clamp(1.5rem, 5vw, 3rem); }

Fehler 5: Verwechslung bei Prozentsatz-Padding

/* Überraschung: Vertikales Padding basiert auf BREITE */
.box {
  padding-top: 10%;    /* 10% der Eltern-BREITE, nicht Höhe */
  padding-bottom: 10%; /* Dasselbe -- basiert auf BREITE */
}

CSS-Einheiten in modernen Frameworks

Tailwind CSS

Tailwind verwendet eine Abstands-Skala basierend auf rem:

{/*  Tailwind-Abstände: 1 Einheit = 0,25rem = 4px */}
<div class="p-4 m-6 text-lg">
  {/*  p-4 = padding: 1rem (16px) */}
  {/*  m-6 = margin: 1.5rem (24px) */}
  {/*  text-lg = font-size: 1,125rem (18px) */}
</div>

CSS-Module / CSS-in-JS

// Styled Components / Emotion
const Card = styled.div`
  padding: 1.5rem;
  margin-bottom: 2rem;
  font-size: 1rem;
  border: 1px solid #e0e0e0;
  border-radius: 0.5rem;
  max-width: min(100%, 600px);
`;

Fazit

CSS-Einheiten sind ein grundlegendes Thema, das jeden Aspekt der Webentwicklung beeinflusst -- Layout, Typografie, Barrierefreiheit und Responsivität. Die wichtigste Erkenntnis ist, dass es keine einzelne "beste" Einheit gibt; die richtige Wahl hängt vom Kontext ab.

Wichtigste Erkenntnisse:

rem als Standard verwenden für Schriftgrößen, Abstände und die meisten Maße
px für feine Details wie Rahmen, Box-Schatten und Umrisse
fr für Grid-Layouts zur proportionalen Platzverteilung
dvh statt vh für vollhohe Mobile-Layouts
ch für Zeilenlängen zur Optimierung der Lesbarkeit
clamp() für responsive Werte mit Minimum- und Maximum-Einschränkungen
em sparsam verwenden für proportionale Komponentenskalierung (wie Button-Padding)
Immer an Barrierefreiheit denken -- Einheiten wählen, die Benutzerpräferenzen respektieren

Das Beherrschen von CSS-Einheiten erfordert Übung, aber die Prinzipien sind klar: Relative Einheiten gegenüber absoluten bevorzugen, darüber nachdenken, wie dein Design auf verschiedene Kontexte reagiert, und immer Barrierefreiheit berücksichtigen.

Für schnelle Einheitenkonvertierungen in deinem Entwicklungsworkflow probiere unser Einheitenkonverter-Tool. Du kannst auch unseren Farbwähler für CSS-Farbwerte und unsere CSS-bezogenen Entwickler-Tools für andere Webentwicklungsaufgaben nutzen.