So nutzt du: Klemmenrechner
- Gib die minimale und maximale Größe (in px oder rem) sowie die Viewport-Breiten ein, bei denen die Skalierung beginnen und enden soll.
- Kopiere den
clamp()Wert – wähle zwischen „rem“ (empfohlen aus Gründen der Barrierefreiheit) oder „px“. - Zieh den Schieberegler für den Ansichtsbereich, um die genaue Größe bei jeder Bildschirmbreite zu sehen, und lies dir die nachstehende Schritt-für-Schritt-Berechnung durch.
- Erstelle eine vollständige Fluid-Typ-Skala oder eine Abstandsskala und kopiere sie als benutzerdefinierte CSS-Eigenschaften.
Was ist CSS `clamp()`?
clamp(MIN, PREFERRED, MAX) Gibt den bevorzugten Wert zurück, der jedoch niemals kleiner als MIN oder größer als MAX ist. Mit einem bevorzugten Wert, der mit dem Viewport mitwächst – wie zum Beispiel 0.8239rem + 0.7512vw – erhältst du flüssige Schriftgrößen und Abstände, die sich nahtlos zwischen einer mobilen und einer Desktop-Größe skalieren, ganz ohne eine ganze Reihe von Media-Queries. Es funktioniert in jedem modernen Browser.
Die Formel, Schritt für Schritt
Die flüssige Größenanpassung ist eine Gerade zwischen zwei Punkten: (min. Viewport, min. Größe) und (max. Viewport, max. Größe). Für 16px bei 375px und 24px bei 1440px:
- Steigung = (24 − 16) ÷ (1440 − 375) = 0,007512 – die Größe wächst um 0,0075px pro Pixel des Viewports.
- vw-Anteil = Steigung × 100 =
0.7512vw, da 1 vw 1 % der Viewport-Breite entspricht. - Achsenabschnitt = 16 − 0,007512 × 375 = 13,183px =
0.8239rembei einer Basis von 16 px. - Ergebnis:
clamp(1rem, 0.8239rem + 0.7512vw, 1.5rem). Bei einem 768px-Viewport sind das 13,183 + 0,007512 × 768 ≈ 18,95px.
Warum rem und vw mischen?
Eine Größe, die ausschließlich aus vw , ignoriert den Browser-Zoom und die Standardschriftgröße des Nutzers, was gegen WCAG 1.4.4 (Textgröße anpassen) verstoßen kann. Ein rem Zwischenwert bedeutet, dass der Wert weiterhin reagiert, wenn jemand zoomt oder eine größere Standardschriftgröße einstellt. Als Faustregel gilt: Wenn das Maximum nicht mehr als das 2,5-Fache des Minimums beträgt, kann der Text immer noch bei 200 % Zoom angezeigt werden – der Rechner markiert Bereiche, die diesen Wert überschreiten.
Flüssige Schrift- und Abstandsskalen
Anstatt jede Überschrift einzeln zu berechnen, definiere eine modulare Skala: Bei jedem Schritt wird die Basis mit einem Verhältnis multipliziert. Ein kleineres Verhältnis auf Mobilgeräten (z. B. 1,2, kleine Terz) und ein größeres auf dem Desktop (z. B. 1,25, große Terz) sorgt dafür, dass Überschriften auf großen Bildschirmen eindrucksvoll wirken, ohne Handys zu überfordern – ein Ansatz, der durch Utopia populär wurde. Die Abstandsskala multipliziert denselben Basiswert (0,25×, 0,5×, 1×, 1,5×, 2×…), sodass Abstände und Lücken im gleichen Verhältnis wie der Text wachsen.
So verwendest du „clamp()“ in Webflow
- Direkt im Stil-Panel: Webflow akzeptiert CSS-Mathematikfunktionen in Größenfeldern. Klicke in „Schriftgröße“, „Abstand“ oder „Lücke“, füge den
clamp(…)Wert ein und drücke die Eingabetaste. - Als Variablen: Erstelle im Variablen-Panel für jeden Schritt eine Größenvariable (z. B. „Schritt 0“, „Abstand M“), füge den clamp()-Wert ein und wende die Variable dann auf Schriftgrößen und Abstände in allen Klassen an – einmal ändern, überall aktualisieren.
- Über benutzerdefinierten Code: Füge den generierten
:root { … }Block in einen<style>Tag unter „Site-Einstellungen“ → „Benutzerdefinierter Code“ → „Head-Code“ ein und gibvar(--step-0)in ein beliebiges Größenfeld ein. - Flüssige Abstände wie
clamp(2rem, …, 4rem)verhindern, dass Abschnitte auf Tablets überdimensioniert wirken – nutze den Schnellstart-Tip „Abstand“.
Möchtest du zuerst die Design-Spezifikationen umrechnen? Der PX-zu-REM-Konverter wandelt Pixelwerte in REM um.
Auch gesucht als: rechner, der auf flüssigkeitsmengen reagiert, schriftgröße von „fluid root“, css-clamp, fließende typografie, skala für flüssigkeitstypen, anpassbare schriftgröße, vw rem, utopie.
Passende Tools zu: Klemmenrechner
- Type Scale Generator — Pick a base font size and a ratio — Minor Third, Major Third, Perfect Fourth, Golden Ratio — and get a harmonious set of font sizes for headings and body text.
- Box Shadow Generator — Stack multiple shadow layers, tweak offsets, blur, spread and opacity on a live card, then copy the box-shadow or text-shadow CSS.
- CSS Gradient Generator — Design a gradient visually — drag color stops, change the angle or type, start from a preset — and copy production-ready CSS with a solid fallback color.
- Einheitenrechner — Rechne zwischen metrischen, imperialen und technischen Einheiten in zehn Kategorien um – mit einem Zwei-Wege-Umrechner und einer Tabelle, in der alle Einheiten auf einen Blick zu sehen sind.
Häufige Fragen
Was sind gute Mindest- und Höchstwerte für den Viewport bei flüssiger Typografie?
Sollte die Ausgabe von „clamp()“ „rem“ oder „px“ verwenden?
Kann „clamp()“ einen Wert auf größeren Bildschirmen verkleinern?
clamp(), wie es CSS vorschreibt.Funktioniert „clamp()“ in Webflow?
var().Warum ändert sich meine „Fluid“-Schriftgröße nicht, wenn ich die Größe des Browsers anpasse?
vw auf dem Desktop die Breite der vertikalen Bildlaufleiste mit einbezieht.