Jede CSS-Einheit: absolute, schriftrelative, viewport-relative Einheiten, die Fluid-Funktionen sowie die Einheiten für Winkel, Zeit und Auflösung — woran jede gemessen wird und wann Sie zu ihr greifen sollten.
Absolute Einheiten (px, pt) behalten unabhängig vom Kontext eine feste Größe; relative Einheiten (rem, vw, %) skalieren gegen einen Referenzwert. Bevorzugen Sie rem für Schriftgrößen: Sie respektiert die Root-Schriftgröße, die der Benutzer eingestellt hat, sodass Ihre Typografie seine Accessibility-Präferenz respektiert. Verwenden Sie clamp() für fluide Typografie, die mit dem Viewport wächst und schrumpft, ohne je eine untere oder obere Grenze zu überschreiten.
Referenztabelle · 38 Einträge
CSS-EinheitenExplained
38 of 38 rows
Absolut
1/96 Zoll (der CSS-Referenzpixel).
Feste UI-Größen: Rahmen, Haarlinien, Icon-Maße.
border: 1px solid #000;
1/72 Zoll (1pt = 1.333px).
Print-Stylesheets, wo Größen auf physisches Papier zeigen.
font-size: 12pt;
1 Zentimeter (≈37.8px).
Print-Layouts mit realen Maßen.
margin: 2cm;
1 Millimeter (≈3.78px).
Feine Druckmaße.
padding: 5mm;
1 Zoll (96px = 2.54cm).
Print-Layouts in Zoll.
margin: 1in;
Schriftrelativ
Die eigene font-size des Elements (vom Elternelement geerbt).
Abstände, die mit dem umgebenden Text mitwachsen.
padding: 1em;
Die font-size des Root-Elements (das html-Element).
Schriftgrößen: respektiert die Root-Schriftgrößen-Einstellung des Benutzers.
font-size: 1.25rem;
Die Breite des Zeichens '0' in der aktuellen Schrift.
Eine lesbare Zeilenlänge festlegen (Zeichen pro Zeile).
max-width: 70ch;
Die x-Höhe der aktuellen Schrift (Höhe des Kleinbuchstabens 'x').
Vertikale Maße, die an die Schriftart gebunden sind.
line-height: 2ex;
Die Versalhöhe der aktuellen Schrift (Höhe eines Großbuchstabens).
Vertikale Maße nach Versalhöhe, enger als ex.
padding-top: 0.5cap;
Die Breite des Ideogramms '水' (Wasser) in der aktuellen Schrift.
Größen, die einer CJK-Zeichenzelle folgen.
width: 4ic;
Die berechnete line-height des Elements selbst.
Elemente in ganzen Textzeilen dimensionieren.
height: 3lh;
Die line-height des Root-Elements.
Abstände in Vielfachen der Basis-Zeilenhöhe des Dokuments.
margin-block: 2rlh;
Viewport-relativ
Der Wert des Elternelements für dieselbe Eigenschaft.
Fluide Layouts, bemessen nach dem umgebenden Element.
width: 50%;
1 % der Viewport-Breite.
Full-Bleed-Sektionen in Bildschirmbreite.
width: 100vw;
1 % der Viewport-Höhe.
Hero-Sektionen oder Overlays über die volle Bildschirmhöhe.
height: 100vh;
1 % der kleineren Viewport-Dimension.
Elemente so bemessen, dass sie in jeder Ausrichtung auf den Bildschirm passen.
font-size: 5vmin;
1 % der größeren Viewport-Dimension.
Die dominante Achse des Viewports füllen.
font-size: 5vmax;
1 % der kleinen Viewport-Höhe (Browser-UI vollständig sichtbar).
Mobile Sektionen in voller Höhe, die über der ausgeklappten Browser-Chrome Platz finden.
height: 100svh;
1 % der großen Viewport-Höhe (Browser-UI verborgen).
Hintergründe, die den Bildschirm bedecken müssen, selbst wenn die Browser-Chrome einklappt.
height: 100lvh;
1 % der dynamischen Viewport-Höhe, die der Browser-UI beim Ein- und Ausblenden folgt.
Der Mobil-Fix für 100vh: Die Höhe ändert sich, wenn die Browser-Chrome erscheint.
height: 100dvh;
1 % der kleinen Viewport-Breite.
Breiten-Gegenstück zu svh für den schmalsten Viewport-Zustand.
width: 100svw;
1 % der großen Viewport-Breite.
Breiten-Gegenstück zu lvh für den breitesten Viewport-Zustand.
width: 100lvw;
1 % der dynamischen Viewport-Breite, die der Browser-UI folgt.
Breiten-Gegenstück zu dvh, wenn der Viewport mit der Chrome mitwächst.
width: 100dvw;
1 % der Viewport-Größe entlang der Inline-Achse (Breite in horizontalen Schreibrichtungen).
Viewport-Bemessung, die der Schreibrichtung folgt.
width: 50vi;
1 % der Viewport-Größe entlang der Block-Achse (Höhe in horizontalen Schreibrichtungen).
Viewport-Bemessung, die in vertikalen Schreibrichtungen korrekt bleibt.
height: 50vb;
Fluid
Ein bevorzugter Wert, begrenzt durch ein Minimum und ein Maximum.
Fluide Typografie, die nie eine untere oder obere Grenze überschreitet.
width: clamp(320px, 80vw, 1100px);
Das kleinste seiner kommagetrennten Argumente.
Eine Größe deckeln, damit sie nie ein Maximum überschreitet.
width: min(100%, 600px);
Das größte seiner kommagetrennten Argumente.
Eine Mindestgröße erzwingen, die mit dem Viewport wächst.
width: max(50%, 300px);
Winkel
1/360 eines vollen Kreises.
Rotations-Transformierungen und Gradientenwinkel.
transform: rotate(45deg);
Radiant; 1rad ≈ 57.2958deg.
Winkel aus mathematischen Berechnungen, etwa generierte Transformierungen.
transform: rotate(1.5708rad);
Gon; 400grad = ein voller Kreis.
Ältere oder vermessungsartige Winkelwerte.
transform: rotate(100grad);
1turn = ein voller 360°-Kreis.
Ganze oder halbe Umdrehungen, die man auf einen Blick liest.
transform: rotate(0.5turn);
Zeit
Eine Sekunde.
Dauern von Animationen und Transitions.
transition: opacity 0.3s;
Eine Millisekunde (1s = 1000ms).
Kurze UI-Feedback-Animationen und Verzögerungen.
animation-duration: 150ms;
Auflösung
Punkte pro Zoll der Ausgabe.
Auf Print zielende Auflösungs-Media-Queries.
@media (min-resolution: 300dpi)
Punkte pro px-Einheit; 1dppx entspricht einem Standard-96dpi-Display.