CSS clamp() berechnen: fluide Schriftgröße und Abstände

So verwenden Sie es

Wählen Sie die Eigenschaft und tragen Sie die Kleinste Größe und die Größte Größe ein. Wählen Sie danach die Einheit der Größen.
Tragen Sie die beiden Breiten unter Viewport-Breite, bei der die Größe am kleinsten ist und Viewport-Breite, bei der die Größe am größten ist ein und wählen Sie deren Einheit.
Haben Sie irgendwo rem verwendet, prüfen Sie die Basis-Schriftgröße (px). Browser verwenden 16 px, sofern die Website keine andere Größe festlegt.
Kopieren Sie die CSS-Deklaration oder prüfen Sie den Rechenweg und die Größe bei gängigen Breiten, um das Ergebnis bei jeder Breite zu sehen.

Wie clamp() eine Größe fließend macht

clamp(MIN, VAL, MAX) nimmt ein Minimum, einen bevorzugten Wert und ein Maximum. Laut der CSS-Spezifikation „Values and Units“ (englisch) entspricht er genau max(MIN, min(VAL, MAX)). Die Größe fällt also nie unter MIN und steigt nie über MAX. Dazwischen folgt sie VAL. Hier ist VAL eine gerade Linie, die von der Viewport-Breite abhängt.

Die Linie verläuft von der kleinsten Größe bei der kleinsten Viewport-Breite zur größten Größe bei der größten Viewport-Breite. Außerhalb dieser beiden Breiten bleibt die Größe unverändert.

Steigung = (größte Größe − kleinste Größe) / (größte Viewport-Breite − kleinste Viewport-Breite);  Achsenabschnitt = kleinste Größe − Steigung × kleinste Viewport-Breite;  bevorzugter Wert = Achsenabschnitt + Steigung × 100vw

Steigung, Achsenabschnitt und der vw-Anteil

Die Steigung gibt an, wie stark die Größe je Pixel Viewport-Breite wächst. Der Achsenabschnitt ist der Punkt, an dem dieselbe Linie bei einer Viewport-Breite von null liegt. Eine vw-Einheit ist ein Prozent der Viewport-Breite. Die Steigung mal 100 ergibt daher den Anteil, der dem Fenster folgt.

Beide Viewport-Breiten und beide Größen werden in Pixel umgerechnet, bevor die Steigung ermittelt wird. Ein rem-Wert wird mit der Basis-Schriftgröße multipliziert. Dasselbe Design ergibt daher in rem oder in px dasselbe Ergebnis, wenn die Basis 16 px beträgt.

Halten Sie die größte Größe mindestens so groß wie die kleinste. Der Rechner lehnt eine kleinere größte Größe ab, weil eine solche Linie mit wachsendem Bildschirm kleiner würde.
Ein vw-Anteil folgt nicht der Textgrößen-Einstellung des Besuchers, ein rem-Achsenabschnitt aber schon. Prüfen Sie die Seite bei 200 % Zoom und halten Sie den Achsenabschnitt möglichst in rem.

Rechenbeispiel: eine Schrift von 16 px auf 24 px

Zwischen einem Viewport von 320 px und einem von 1200 px wächst die Schrift von 16 px auf 24 px. Die Steigung ist (24 − 16) / (1200 − 320) = 8 / 880, das ergibt auf vier Nachkommastellen 0,0091. Der Achsenabschnitt ist 16 − 0,0091 × 320 = 13,0909 px, und der vw-Anteil ist 0,9091 vw.

Der Wert lautet clamp(16px, 13.0909px + 0.9091vw, 24px), also ist die CSS-Deklaration font-size: clamp(16px, 13.0909px + 0.9091vw, 24px);. Mit rem-Einheiten von 1rem bis 1.5rem zwischen 20rem und 75rem und einer Basis von 16 px ergibt sich clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem).

Häufig gestellte Fragen

Was passiert mit der Größe, wenn der Viewport schmaler ist als die kleinste Breite?

Die Größe bleibt bei der kleinsten Größe. Die clamp()-Formel lässt den Wert nie unter sein Minimum fallen, daher behält der Text die Größe, die Sie für die schmalste Breite festgelegt haben.

Warum wird der Viewport-Anteil in vw geschrieben?

Eine vw-Einheit ist ein Prozent der Viewport-Breite und ändert sich daher, wenn sich das Browserfenster ändert. Ein Wert in Pixeln oder rem würde sich mit dem Fenster nicht ändern, und die Größe könnte ihm nicht folgen.

Warum steht im Code manchmal der vw-Anteil zuerst?

Ist der Achsenabschnitt negativ, schreibt der Code den vw-Anteil zuerst und zieht den Achsenabschnitt ab, was klarer zu lesen ist. Beide Schreibweisen ergeben denselben Wert.

Kann ich den Wert für Innenabstand, Außenabstand oder Zwischenraum verwenden?

Ja. Wählen Sie unter Eigenschaft Innenabstand, Außenabstand oder Zwischenraum. Dieselbe Linie funktioniert für jede Länge, daher wächst der Abstand mit dem Viewport genauso wie eine Schriftgröße.

Welche Browser unterstützen clamp()?

Alle gängigen aktuellen Browser unterstützen clamp(). Nutzen Ihre Besucher ältere Versionen, prüfen Sie die Seite in diesen Versionen, bevor Sie sich auf die fließende Größe verlassen.

Werden meine Eingaben gespeichert oder an einen Server gesendet?

Nein. Der Wert wird in Ihrem Browser berechnet, und nichts, was Sie eingeben, wird gespeichert oder an unseren Server gesendet. Kopieren Sie die Deklaration, bevor Sie die Seite verlassen.

Quellen

Zahlen und Text zuletzt geprüft: Dienstag, 10. November 2026.

Ergebnis

Rechenweg