CSS-clamp()-Rechner

clamp() berechnen: aus Mindest- und Höchstwert sowie Viewport-Breiten eine fließende CSS-Größe erzeugen – mit Vorschau.

Der CSS-clamp()-Rechner erzeugt aus einem Mindest- und Höchstwert sowie zwei Viewport-Breiten eine fließende Größe: Der Wert wächst stufenlos zwischen den Breiten und bleibt außerhalb konstant. Du erhältst fertigen clamp()-Code in rem für Schriftgröße, Abstände oder Breiten, dazu eine Vorschau bei beliebiger Viewport-Breite und die passende Tailwind-Klasse.

Mindestwert

Höchstwert

Ab Viewport-Breite

Bis Viewport-Breite

Einheit der Werte

Root-Schriftgröße

Eigenschaft

Vorschau-Viewport px

Berechneter Wert bei 768px Breite

20.07px (1.255rem)

Fließende Schrift

font-size: clamp(1rem, 0.8182rem + 0.9091vw, 1.5rem);

Was ist clamp() in CSS?

Die Funktion clamp(min, bevorzugt, max) begrenzt einen Wert nach unten und oben. Mit einem bevorzugten Wert, der von der Viewport-Breite abhängt, entsteht fließendes Verhalten ohne Media Queries: Die Größe wächst zwischen zwei Breiten und bleibt darüber und darunter konstant.

So wird der Wert berechnet

Steigung = (Maximum − Minimum) ÷ (max. Breite − min. Breite).
Achsenabschnitt = Minimum − Steigung × min. Breite.
Bevorzugter Wert = Achsenabschnitt (in rem) + Steigung × 100 (in vw).

So gehst du vor

Werte und Viewport-Breiten eingeben.
Kurve und Vorschau prüfen.
Code kopieren. Für komplette Skalen nutzt du den Fluid-Typografie-Generator und den Fluid-Spacing-Generator.

Beispiel

Eine Überschrift soll zwischen 320 px und 1200 px Breite von 24 px auf 48 px wachsen. Der Rechner liefert einen clamp()-Wert in rem, den du als font-size einsetzt. Pixel und rem rechnest du bei Bedarf mit dem PX-REM-EM-Umrechner um.

Häufige Fragen

Wie funktioniert clamp()?

clamp(min, bevorzugt, max) nimmt den bevorzugten Wert, hält ihn aber zwischen Minimum und Maximum. Der bevorzugte Wert enthält eine Viewport-Einheit, deshalb wächst er mit der Fensterbreite. Der Rechner bestimmt ihn so, dass er genau bei den gewählten Breiten Minimum und Maximum erreicht.

Warum steht im bevorzugten Wert rem und vw zusammen?

Ein reiner vw-Wert ignoriert die Schrifteinstellung der Nutzenden und lässt sich nicht zoomen. Mit einem rem-Anteil skaliert der Wert auch bei vergrößerter Browserschrift und Zoom mit, was für die Barrierefreiheit wichtig ist.

Wie groß darf das Verhältnis zwischen Maximum und Minimum sein?

Bei Schrift empfiehlt sich höchstens das 2,5-fache, damit Text sich auf 200 % zoomen lässt (WCAG 1.4.4). Größere Spannen können beim Zoomen zu klein bleiben. Der Rechner warnt dich in diesem Fall.

Kann ich clamp() auch für Abstände und Breiten nutzen?

Ja, überall, wo CSS eine Länge erwartet: padding, margin, gap, width, height, border-radius und mehr. Wähle die Eigenschaft im Rechner, dann passt der Code.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.