CSS-Clamp-Rechner
Erzeuge fluide Typografie oder Abstände zwischen Viewport-Grenzen.
So verwendest du CSS-Clamp-Rechner
CSS clamp calculator creates a clamp() value that scales a font size or spacing linearly between a minimum and maximum pixel size across a viewport range. Enter both sizes and both viewport widths, which default to 16 to 32 px between 320 and 1280 px viewports, and get a calc() expression combining px and vw plus a live text preview.
- Gib die angeforderten Werte im Einstellungsbereich ein.
- Passe die Grundeinstellungen an und öffne dann den Erweiterten Modus für Export- und Feinabstimmungsoptionen. Benutzerdefinierte Einstellungen bleiben aktiv, wenn das Panel geschlossen wird.
- Führe den CSS-Clamp-Rechner aus, prüfe die Ausgabe und verwende dann die verfügbaren Bedienelemente zum Kopieren oder Herunterladen.
Was dieses Tool unterstützt
Erzeuge fluide Typografie oder Abstände zwischen Viewport-Grenzen.
- Minimale Schrift-/Abstandsgröße (px)
- Range: 0 to 1000
- Maximale Schrift-/Abstandsgröße (px)
- Range: 0 to 1000
- Minimaler Viewport (px)
- Range: 1 to 10000
- Maximaler Viewport (px)
- Range: 1 to 10000
Grenzen und Verarbeitung
Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.
Häufige Fragen
How do I calculate a fluid font size with CSS clamp?
The slope is the size difference divided by the viewport difference. The middle value becomes an intercept in px plus the slope times 100 in vw, so the size reaches the minimum at the small viewport and the maximum at the large one. The calculator does this for you.
Why does the clamp calculator output px instead of rem?
All inputs and outputs are in pixels, and the middle term combines px with vw rounded to six decimals. If your design system uses rem, divide the pixel values by your root font size after copying the result.
What causes the error that maximum viewport must exceed minimum?
The maximum viewport must be larger than the minimum viewport, and the maximum size cannot be smaller than the minimum size. Equal sizes are allowed and produce a fixed value. Swap the fields if you entered them in the wrong order.
Wo wird meine Eingabe verarbeitet?
Dieser Vorgang verarbeitet seine Quelle in deinem Browser. Kopieren und Herunterladen sind ausdrückliche Aktionen; die Quelleingabe wird nicht in einem Konto oder Verlauf gespeichert.
Welche Eingabelimits gelten?
Bilder unterliegen der bestehenden Canvas-Grenze von 32 Megapixeln. Wo unterstützt, sind bis zu 100 Quellbilder zulässig. Eingefügtes HTML ist auf 200.000 Zeichen begrenzt; Mermaid-Diagramme auf 20.000 Zeichen und 300 Zeilen. Die SVG- und PNG-Erzeugung erfordert einen Browser.