Zieh an einem Regler für die Viewport-Breite und sieh zu, wie calc(), min(), max() und clamp() zu Pixeln aufgelöst werden. Außerdem vh vs. svh, lvh und dvh, fit-content und min-content live, gap und Rezepte für fluide Typografie.
Mit CSS-Mathefunktionen passt sich ein einzelner Wert an den Bildschirm an. calc() mischt Einheiten, etwa calc(100% - 2rem). min() wählt die kleinste Option, sodass width: min(100%, 640px) nie überläuft. max() wählt die größte, und clamp(min, preferred, max) hält einen fluiden Wert zwischen zwei Grenzen. dvh folgt der wechselnden Toolbar des mobilen Browsers, anders als einfaches vh.
Welche Funktion für welche Aufgabe
Aufgabe
CSS
Volle Breite minus fester Rand
width: calc(100% - 2rem)
Eine Spalte, die bei 640px endet
width: min(100%, 640px)
Padding, das nie unter 1rem fällt
padding: max(1rem, 4vw)
Überschrift, die zwischen 2rem und 3.5rem skaliert
font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem)
Hero, der den sichtbaren mobilen Bildschirm füllt
min-height: 100dvh
Statt deinen Browser zu verkleinern, um eine Formel zu testen, ziehst du an der simulierten Viewport-Breite, und jede Funktion wird direkt vor dir zu Pixeln aufgelöst, wobei der Punkt markiert ist, an dem clamp() seine Grenzen erreicht. Die Seite zeichnet außerdem, was vh, svh, lvh und dvh auf einem Smartphone messen, und zeigt die intrinsischen Schlüsselwörter an echten Boxen.
Zieh den Regler für die Viewport-Breite von Smartphone-Größe bis zu einem breiten Monitor.
Passe Minimum, bevorzugten Wert und Maximum der clamp()-Formel an und beobachte das Ergebnis in Pixeln.
Vergleiche, wie die Zeilen für min(), max() und calc() bei derselben Breite aufgelöst werden.
Kopiere die Formel und probiere dann die Boxen zur Inhaltsgröße und die gap-Beispiele weiter unten aus.
Leerzeichen um + und - innerhalb von calc() sind Pflicht. calc(100%-2rem) ist ungültig; calc(100% - 2rem) funktioniert.
Behalte in der Mitte eines fluiden clamp() für Schriftgrößen einen rem-Anteil, damit der Text weiterhin reagiert, wenn jemand zoomt oder die Standardgröße ändert.
min() und max() wirken anfangs verkehrt herum: min() legt eine Maximalgröße fest, weil es immer den kleineren Wert nimmt.
Setze dvh für Vollbild-Abschnitte sparsam ein, da sich sein Wert ändert, wenn die Toolbar sich bewegt, und Inhalte beim Scrollen verschieben kann. svh ist die stabile Wahl.
Häufige Fragen
Was ist der Unterschied zwischen vh, svh, lvh und dvh?
Auf Smartphones wächst und schrumpft die Browser-Toolbar. svh ist 1% des kleinen Viewports, bei sichtbarer Toolbar. lvh ist 1% des großen Viewports, bei ausgeblendeter Toolbar. dvh folgt dem jeweils aktuellen und aktualisiert sich beim Scrollen. Klassisches vh entspricht meist lvh, weshalb 100vh-Abschnitte auf Mobilgeräten abgeschnitten werden.
Werden clamp(), min() und max() überall unterstützt?
Ja, alle drei funktionieren seit 2020 in jedem großen Browser. Die kleinen, großen und dynamischen Viewport-Einheiten kamen später, im Laufe von 2022, und sind inzwischen in allen aktuellen großen Browsern verfügbar. Setze eine einfache vh-Fallback-Zeile davor, wenn du noch ältere Geräte unterstützt.
Wie schreibe ich eine fluide Schriftgröße mit clamp()?
Wähle die Größe für einen schmalen und für einen breiten Bildschirm und schreib dann clamp(small, preferred, large). Der bevorzugte Wert kombiniert rem und vw, etwa 1rem + 2vw, sodass die Größe mit dem Fenster wächst, aber zwischen den beiden Grenzen bleibt. Das Labor unten zeigt die genauen Breiten, ab denen die Grenzen greifen.
Was macht fit-content?
width: fit-content passt eine Box an ihren Inhalt an, wie ein eng anliegender inline-block, aber nie breiter als der verfügbare Platz. Das entspricht min(max-content, max(min-content, available space)). Die Funktion fit-content() in Grid-Tracks macht dasselbe mit einer Grenze, die du selbst wählst.
Kann man gap mit flexbox verwenden?
Ja. gap, row-gap und column-gap funktionieren in allen aktuellen Browsern auch in Flex-Containern, nicht nur in Grid. Gap wird nur zwischen den Elementen eingefügt, nie an den Außenkanten, was einfacher ist als Margins an jedem Kind.
Wie calc() aufgelöst wird
calc() wird erst beim Layout aufgelöst und kann daher einen Prozentwert, der vom Elternelement abhängt, mit einem rem- oder Pixelwert kombinieren. Du kannst calc() in min(), max() und clamp() verschachteln und darin Custom Properties verwenden, etwa calc(var(--gutter) * 2).
Multiplikation und Division brauchen mindestens eine einfache Zahl: calc(2 * 1rem) ist in Ordnung, calc(1rem * 1rem) nicht. Eine Division durch null macht die Deklaration ungültig.
Intrinsische Größen: min-content, max-content und fit-content
min-content ist die schmalste Breite, die eine Box ohne Überlaufen annehmen kann, meist die Breite ihres längsten Wortes oder breitesten Bildes. max-content ist die Breite, die sie hätte, wenn Text nie umbrechen würde. Beide sind nützlich für Grid-Tracks und für Labels, die sich eng an ihren Text anschmiegen sollen.
fit-content liegt zwischen beiden: Es ist so breit, wie der Inhalt es möchte, bricht aber um, wenn der Container schmaler ist. Damit lässt sich eine eng anliegende Box sauber mit margin-inline: auto zentrieren.
Fluide Abstände genauso wie fluide Schrift
Derselbe clamp()-Trick funktioniert für Padding, Margins und Gaps. Ein Abschnitt mit padding-block: clamp(2rem, 6vw, 6rem) hat auf großen Bildschirmen Luft, ohne auf einem Smartphone Platz zu verschwenden.
Definiere die fluiden Werte einmal als Custom Properties, zum Beispiel --space-m und --step-2, und verwende sie überall. Wenn du die Skala später änderst, bearbeitest du dann eine einzige Zeile, statt dich durch Komponenten zu suchen.
vh vs. svh, lvh und dvh
Viewport-Prozent-Einheiten
Einheit
1 Einheit entspricht
Ändert sich beim Scrollen?
Verwenden für
vh / vw
1% des Viewports (auf Mobilgeräten meist des großen)
Nein
Desktop-Layouts, Fallback für ältere Browser
svh / svw
1% des kleinen Viewports, Toolbars sichtbar
Nein
Vollbild-Abschnitte, die nie verdeckt werden dürfen
lvh / lvw
1% des großen Viewports, Toolbars ausgeblendet
Nein
Hintergründe, die alles abdecken sollen
dvh / dvw
1% des aktuellen Viewports
Ja
Layouts, die der Toolbar folgen sollen
vmin / vmax
1% der kleineren oder größeren Seite
Nein
Quadratische Elemente, die in beide Ausrichtungen passen
cqi / cqw
1% der Inline-Größe eines Size-Containers
Mit dem Container
Komponenten innerhalb von Container Queries
Ein mobilsicherer Hero in voller Höhe
Die erste Zeile ist das Fallback für Browser ohne die neueren Einheiten. Die zweite überschreibt sie, wo sie unterstützt werden.
Beispiele für calc(), min(), max() und clamp()
Eine gut lesbare Spalte ohne Media Query
min() begrenzt die Breite; das Padding nutzt max(), damit es nie unter 12px schrumpft. Beide Regeln passen sich von selbst an die Rahmenbreite an.
calc() für eine feste Sidebar neben einem fluiden Hauptbereich
Der Hauptbereich nimmt alles, was nach der 120px breiten Sidebar und dem 12px-Gap übrig bleibt.
min-content, max-content und fit-content
Schlüsselwörter für intrinsische Größen
Schlüsselwort
Breite wird zu
Tailwind
Dem längsten nicht umbrechbaren Wort oder breitesten Bild
Allem Inhalt in einer Zeile, auch wenn er überläuft
max-content, aber nicht breiter als der verfügbare Platz
fit-content(300px) in grid
Wie fit-content mit einer Obergrenze von 300px
grid-cols-[fit-content(300px)_1fr]
gap in Flex und Grid
Derselbe gap in einer umbrechenden Flex-Zeile und einem Grid
row-gap und column-gap können sich unterscheiden. Keiner von beiden fügt an den Außenkanten Abstand hinzu.
Fluide Schrift- und Abstandsskala
Eine kleine fluide Skala als Custom Properties
Jede Stufe wächst zwischen etwa einem 360px-Smartphone und einem 1280px-Desktop. Passe die Zahlen im Labor oben an.
Viewport-Labor
Simulierte Viewport-Breite (px)
Fluide Überschrift bei {px}px
Aufgelöste Werte bei der simulierten Breite
Funktion
Deklaration
Bei {vp}px
clamp-Minimum (rem)
clamp-Maximum (rem)
bevorzugt: rem-Anteil
bevorzugt: vw-Anteil
Das Maximum liegt unter dem Minimum, daher gewinnt bei jeder Breite das Minimum.
Bleibt bis etwa {from}px Breite bei {min}rem, wächst bis etwa {to}px und hält dann bei {max}rem.
Ohne vw-Anteil ändert sich der Wert nie mit dem Fenster.
Kopieren
Was 100 jeder Einheit auf einem Smartphone abdecken
Drei Smartphones: 100svh füllt den Raum zwischen sichtbaren Toolbars, 100lvh füllt den ganzen Bildschirm, als wären die Toolbars ausgeblendet, 100dvh folgt den Toolbars, wenn sie sich ändern
Toolbars sichtbar
Toolbars ausgeblendet
folgt den Toolbars
Graue Streifen sind Browser-Toolbars. Blau ist die Fläche, die 100 Einheiten füllen.
Inhaltsgröße, live
Breiten-Schlüsselwort
Verfügbarer Platz (px)
Kostenlose Lieferung auf jede Bestellung an diesem Wochenende