Was clamp() macht
clamp(MIN, PREFERRED, MAX) nimmt drei Werte und liefert den mittleren, solange er zwischen den anderen beiden bleibt. Der klassische Einsatz ist eine Überschrift, die mit dem Bildschirm wächst, aber an sinnvollen Grenzen haltmacht, ganz ohne Media Query:
Der bevorzugte Wert ist 1rem + 3vw: 16px plus 3% der Breite. In einer 800px breiten Vorschau sind das 16 + 24 = 40px, was zwischen 24px (1.5rem) und 48px (3rem) liegt, also ist die Überschrift 40px groß. Auf einem 320px-Handy ist der bevorzugte Wert 25,6px. Ab 1067px würde er 48px überschreiten, also bleibt er bei 48px stehen. Ändere die Fenstergröße, um die Zahl sich ändern zu sehen; vw ist hier ein Prozentsatz der Breite des Vorschau-Frames.
Ohne das Fenster zu verkleinern
vw folgt dem Viewport, den du beim Lesen nicht einfach ändern kannst. Container-Query-Einheiten folgen stattdessen einem Container: cqi ist 1% der Breite des Containers. Zieh am Schieberegler, um die Box zu ändern, und dieselbe Art von clamp() reagiert:
Schieb ihn an den Anfang, und der Titel bleibt bei 20px stehen (das MIN). Schieb ihn ans Ende, und er bleibt bei 40px stehen (das MAX). Dazwischen folgt er 0.5rem + 6cqi. Das ist derselbe Mechanismus wie in der vw-Version, nur mit einem kleineren Lineal.
Die drei Argumente
font-size: clamp(1rem, 0.8rem + 1vw, 1.5rem);
/* MIN PREFERRED MAX */
| Argument | Rolle | Typische Einheit |
|---|---|---|
| MIN | der kleinste Wert, den es annehmen darf | rem |
| PREFERRED | der Wert, der sich mit dem Bildschirm ändert | rem + vw (oder cqi) |
| MAX | der größte Wert, den es annehmen darf | rem |
In jedem Argument funktioniert Rechnen, ohne calc() zu schreiben: 1rem + 2vw passt so, wie es ist. + und - brauchen auf beiden Seiten ein Leerzeichen, sonst ist die ganze Deklaration ungültig.
Ist MIN größer als MAX, gewinnt MIN: clamp(3rem, 5vw, 2rem) ist immer 3rem.
Den mittleren Wert berechnen
Damit eine Schrift von 16px auf einem 320px-Bildschirm auf 24px auf einem 1280px-Bildschirm wächst:
- Steigung: (24 − 16) ÷ (1280 − 320) = 8 ÷ 960 = 0,00833, also 0.833vw (vw ist pro 100px).
- Startwert: 16px − 0,00833 × 320px = 13,33px, also 0.833rem.
- Setz die Grenzen drumherum:
font-size: clamp(1rem, 0.833rem + 0.833vw, 1.5rem);
Bei 320px Breite ergibt das 13,33 + 2,67 = 16px, bei 1280px ergibt es 13,33 + 10,67 = 24px, und außerhalb dieses Bereichs bleibt es an den Grenzen. Online-„Clamp-Rechner“ machen genau diese Rechnung.
min() und max()
clamp() ist eine Kombination aus zwei einfacheren Funktionen:
min(a, b)liefert den kleineren Wert und setzt damit eine Obergrenze.max(a, b)liefert den größeren Wert und setzt damit eine Untergrenze.clamp(MIN, VAL, MAX)ist dasselbe wiemax(MIN, min(VAL, MAX)).
Die Namen wirken anfangs verdreht: Um „höchstens 600px“ zu sagen, nimmst du min().
In der breiten Vorschau bleibt die erste Karte bei 420px stehen. Im 260px breiten Elternelement ist 100% der kleinere Wert, also ist die zweite Karte 260px breit. max(12px, 3%) gibt der ersten Karte 3% der Breite ihres Elternelements (des body: in einer 800px-Vorschau etwa 23,5px) und der zweiten 12px, weil 3% von 260px (7,8px) unter der Untergrenze liegen.
width: min(100%, 420px) ersetzt das ältere Paar width: 100%; max-width: 420px; in einer einzigen Deklaration.
Mehr als Schriftgrößen: Abstände und Breiten
clamp() funktioniert in jeder Eigenschaft, die eine Länge annimmt. Prozentwerte im mittleren Wert machen eine Komponente fließend relativ zu ihrem Elternelement statt zum Viewport:
Im 300px breiten Elternelement ist die Karte 240px breit (80%) mit 15px Padding (5% von 300px). Im 760px breiten Elternelement wären 80% 608px, also bleibt die Karte bei ihrem Maximum von 520px stehen, und 5% von 760px sind 38px, also bleibt das Padding bei 32px stehen.
Barrierefreiheit: rem im mittleren Wert behalten
Eine Schriftgröße nur aus vw, etwa font-size: 5vw, wächst nicht, wenn der Leser die Standardschriftgröße in den Browsereinstellungen erhöht, und sie wächst auch nicht mit dem Browserzoom, weil Zoomen den Viewport in CSS-Pixeln schmaler macht. Ein Anteil in rem (1rem + 2vw) und Grenzen in rem halten den Text an die Einstellung des Lesers gebunden. Die Seite zu Einheiten erklärt rem und vw im Detail.
Häufige Fehler
min()für ein Minimum nehmen.min()wählt den kleineren Wert, und das ist eine Obergrenze. Für „mindestens 12px“ nimmst dumax(12px, ...).- Keine Leerzeichen um
+oder-.clamp(1rem, 1rem+2vw, 3rem)ist ungültig, und die Eigenschaft fällt auf ihren vorherigen Wert zurück. - Nur
vwin der Mitte. Der Text ignoriert dann die Schriftgrößeneinstellung des Lesers. Ergänze einenrem-Anteil. - MIN größer als MAX. Das Ergebnis ist immer MIN, was selten gemeint ist.
- Grenzen in
pxfür Schriftgrößen. Sie deckeln den Text auch für Leser, die ihn größer brauchen. Nimmrem.
Häufig gestellte Fragen
Was macht clamp() in CSS?
clamp(MIN, PREFERRED, MAX) verwendet den bevorzugten Wert, solange er zwischen den beiden Grenzen liegt, und sonst die nächstgelegene Grenze. font-size: clamp(1rem, 4vw, 2rem) folgt 4% der Viewport-Breite, geht aber nie unter 1rem oder über 2rem.
Wie mache ich mit clamp eine responsive Schriftgröße?
Setz einen viewportbasierten Wert in die Mitte und feste Grenzen an die Seiten, und misch rem in den mittleren Wert, damit der Text weiterhin der Schriftgrößeneinstellung des Lesers folgt: font-size: clamp(1.5rem, 1rem + 2vw, 3rem);.
Was passiert, wenn in clamp() das Minimum größer als das Maximum ist?
Das Minimum gewinnt. clamp(3rem, 5vw, 2rem) ergibt immer 3rem, weil clamp() das Minimum nach dem Maximum anwendet.
Was ist der Unterschied zwischen min() und max() in CSS?
min() liefert den kleinsten seiner Werte und wirkt damit als Obergrenze: width: min(100%, 600px) wird nie breiter als 600px. max() liefert den größten und wirkt damit als Untergrenze: font-size: max(1rem, 2vw) wird nie kleiner als 1rem.
Wird clamp() von allen Browsern unterstützt?
Ja, clamp(), min() und max() funktionieren in allen aktuellen Versionen von Chrome, Edge, Firefox und Safari und lassen sich in jeder Eigenschaft verwenden, die eine Länge, Zahl, einen Prozentwert oder einen Winkel annimmt.
