DE

CSS clamp Rechner

Mit dem CSS clamp Rechner erzeugen Sie aus Mindest- und Höchstwert sowie dem Viewport-Bereich den fertigen clamp()-Ausdruck für Schriftgrößen, Abstände und Breiten, ganz ohne Media Queries.

Beispiel: CSS-Eigenschaft: font-size · Kleinster Wert (Handy) 16 px · Größter Wert (Desktop) 24 px · Ab Viewport-Breite 320 px · Bis Viewport-Breite 1.280 px · Basisschriftgröße (rem) 16 px → CSS: font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);. Quelle: MDN – CSS clamp(): clamp(MIN, VAL, MAX). Stand: .

px
px
px
px
px
16 px
Meine ToolboxIhre Eingaben werden nur in diesem Browser gespeichert.

Ergebnis

CSS
font-size: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem);
Wert bei gängigen Viewport-Breiten
Viewport-BreiteWert in pxWert in rem
320 px16 px1 rem
375 px16,46 px1,029 rem
768 px19,73 px1,233 rem
1024 px21,87 px1,367 rem
1280 px24 px1,5 rem
1920 px24 px1,5 rem
Dazwischen wächst der Wert linear um 0,8333 vw je 1 vw Viewport-Breite.

So wird gerechnet

clamp(MIN, WERT, MAX) begrenzt einen Wert nach unten und oben. Für eine Schrift, die zwischen 320 px und 1280 px Viewport-Breite von 16 auf 24 px wächst, lautet er: clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem).

So wird gerechnet

Zwischen den beiden Viewport-Breiten steigt der Wert linear. Die Steigung ist (Max − Min) / (Viewportmax − Viewportmin), der Achsenabschnitt Min − Steigung · Viewportmin. Der Achsenabschnitt steht in rem, die Steigung in vw; so zählt eine vom Nutzer vergrößerte Browser-Schrift weiter mit. Die Tabelle zeigt, welcher Wert bei typischen Geräten herauskommt.

Gut zu wissen

Häufige Fragen

Wie berechne ich clamp() für Schriftgrößen?

Mindest- und Höchstgröße in px sowie die Viewport-Breiten eingeben. Der Rechner bildet daraus den bevorzugten Wert aus rem und vw und setzt ihn zwischen Minimum und Maximum.

Warum steht im Ausdruck ein rem-Anteil?

Ein Wert nur in vw reagiert nicht auf die Schriftgröße im Browser. Mit einem rem-Anteil bleibt der Text für Nutzer mit größerer Standardschrift mitskalierbar.

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

Ja, für jede CSS-Eigenschaft mit Längenwert, zum Beispiel padding, margin, gap oder width.

Was bedeutet 1.5rem im letzten Wert?

Der Höchstwert: ab der oberen Viewport-Breite wächst die Schrift nicht weiter. Bei 16 px Basisgröße sind 1,5 rem genau 24 px.

Quellen und Rechtsgrundlagen

Stand: · So prüfen wir

Passende Werkzeuge