Wie berechnet ein CSS Clamp Calculator die vw-Steigung?

Er zeichnet eine Gerade durch deine beiden Ankerpunkte: Steigung = (maxSize − minSize) / (maxViewport − minViewport). Da 100vw der Viewport-Breite entspricht, ist der vw-Koeffizient im Wert diese Steigung mal 100, und der rem-Achsenabschnitt ist, was übrig bleibt, wenn die Gerade auf einen Viewport der Breite null zurückverlängert wird.

Warum mischt der mittlere Term rem und vw?

Der bevorzugte Wert ist eine Gerade: ein fixer Teil, der nicht von der Breite abhängt (der rem-Achsenabschnitt), plus ein Teil, der mit dem Viewport wächst (die vw-Steigung). Das Mischen der beiden lässt die Größe sanft zwischen deinem Min und Max skalieren, statt an einem Breakpoint zu springen.

Sollte ich px oder rem in den clamp-Grenzen verwenden?

rem-Grenzen respektieren die Browser-Schriftgrößeneinstellung des Nutzers, was für die Barrierefreiheit besser ist, daher gibt dieses Tool standardmäßig rem aus. Du kannst die Anzeige auf px umstellen, aber rem-clamp-Grenzen sind die sicherere Wahl für die Textgrößenbestimmung.

Kann ich denselben clamp()-Wert für Ränder und Abstände verwenden?

Ja. clamp() funktioniert für jede Länge, sodass der Wert auf padding, margin, gap und Grid-Tracks ebenso anwendbar ist wie auf font-size. Verwende das Preset für fluide Abstände als Ausgangspunkt und passe die Min- und Max-Größen an.

Welche Root-Schriftgröße sollte ich eingeben?

Verwende, was deine Seite auf dem html-Element setzt — 16px ist der Browser-Standard und der Standard des Tools. Wenn du die Root anderswo skalierst, gib diesen Wert ein, damit die rem-Ausgabe auf die Pixel abbildet, die du tatsächlich siehst.

Werden die Größen, die ich tippe, irgendwohin hochgeladen?

Nein. Der CSS Clamp Calculator läuft vollständig in deinem Browser. Die Viewport-Breiten und Größen, die du eingibst, werden nur zur Berechnung des Werts auf deinem Gerät verwendet und niemals zu ArrayKit gesendet.

CSS Clamp Calculator

Verwandle eine Min- und Max-Größe plus zwei Viewport-Breiten in einen fluiden CSS-clamp()-Wert, live berechnet in deinem Browser.

Der CSS Clamp Calculator läuft vollständig in deinem Browser. Die Viewport-Breiten, Größen und die Root-Schriftgröße, die du eingibst, verlassen niemals dein Gerät und nichts wird zu ArrayKit hochgeladen.

CSS Unit Converter öffnen

Über CSS Clamp Calculator

Der CSS Clamp Calculator verwandelt vier Zahlen — eine Min- und Max-Größe in Pixeln plus die beiden Viewport-Breiten, auf die sie abgebildet werden — in einen einfügefertigen clamp()-Wert für fluide Typografie und Abstände. Er legt eine Gerade zwischen deine beiden Ankerpunkte, ermittelt die vw-Steigung und den rem-Achsenabschnitt und fixiert das Ergebnis unterhalb des kleinen Viewports auf dein Min und oberhalb des großen auf dein Max. Ein Live-Vorschau-Slider zeigt die exakt gerenderte Größe bei jeder Breite dazwischen, sodass du die Rampe vor dem Ausliefern prüfen kannst. Kopiere den rohen clamp()-Wert, eine font-size-Deklaration oder einen beliebigen Tailwind-Wert. Alles wird auf deinem Gerät berechnet — die Größen, die du tippst, bleiben im Browser und nichts wird zu ArrayKit hochgeladen.

Funktionen

Erzeugt einen clamp(minRem, slopeVw + interceptRem, maxRem)-Wert aus vier Zahlen
Live-Vorschau-Slider zeigt die gerenderte Größe bei jeder Viewport-Breite
Setze deine eigene Root-Schriftgröße, um die px → rem-Umrechnung zu steuern
Lies die exakte vw-Steigung und den rem-Achsenabschnitt hinter dem Wert aus
Kopiere den rohen clamp()-Wert, eine font-size-Deklaration oder eine Tailwind-Klasse
Presets für Fließtext, Überschriften, Hero-Typo und fluide Abstände
Verarbeitet absteigende Rampen, bei denen die Größe schrumpft, wenn der Viewport wächst
Läuft vollständig in deinem Browser, ohne dass Größen irgendwohin gesendet werden

So verwendest du CSS Clamp Calculator

Gib deine Min- und Max-Viewport-Breiten in Pixeln ein
Gib die Min- und Max-Größen ein, die das Element bei diesen Breiten erreichen soll
Passe die Root-Schriftgröße an, wenn sie nicht die Standard-16px ist
Ziehe den Vorschau-Slider, um die gerenderte Größe über den Bereich zu prüfen
Kopiere den clamp()-Wert oder die CSS-Deklaration in dein Stylesheet

Beispiel

Eingabe

min viewport 320px, max viewport 1200px
min size 16px, max size 24px, root 16px

Ausgabe

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

16px bei 320px wächst auf 24px bei 1200px und bleibt außerhalb dieses Bands flach.

Häufige Fehler & Fehlerbehebung

Der Text wächst nie über die Min-Größe hinaus. — Prüfe, ob der Min-Viewport kleiner als der Max-Viewport ist — ein umgekehrter Bereich flacht die Rampe ab, sodass der bevorzugte Term zwischen den Grenzen nie gewinnt.
Die Größen wirken nach dem Ändern der Root-Schriftgröße falsch. — clamp()-rems sind relativ zur Root. Wenn deine Seite html { font-size } auf etwas anderes als 16px setzt, gleiche das Root-Feld an, damit die rem-Ausgabe zu den erwarteten Pixeln auflöst.
Der Wert skaliert auf sehr breiten Bildschirmen zu aggressiv. — Der mittlere Term steigt bis zum Max-Viewport weiter. Senke die Max-Viewport-Breite oder die Max-Größe, damit die Rampe ihre Obergrenze früher erreicht und darüber hinaus gedeckelt bleibt.
clamp() wird in einem älteren Browser ignoriert. — clamp() wird in modernen Browsern breit unterstützt. Für sehr alte Ziele stelle zuerst eine statische font-size als Fallback bereit und lass clamp() sie überschreiben, wo es unterstützt wird.

Häufig gestellte Fragen

Wie berechnet ein CSS Clamp Calculator die vw-Steigung?: Er zeichnet eine Gerade durch deine beiden Ankerpunkte: Steigung = (maxSize − minSize) / (maxViewport − minViewport). Da 100vw der Viewport-Breite entspricht, ist der vw-Koeffizient im Wert diese Steigung mal 100, und der rem-Achsenabschnitt ist, was übrig bleibt, wenn die Gerade auf einen Viewport der Breite null zurückverlängert wird.
Warum mischt der mittlere Term rem und vw?: Der bevorzugte Wert ist eine Gerade: ein fixer Teil, der nicht von der Breite abhängt (der rem-Achsenabschnitt), plus ein Teil, der mit dem Viewport wächst (die vw-Steigung). Das Mischen der beiden lässt die Größe sanft zwischen deinem Min und Max skalieren, statt an einem Breakpoint zu springen.
Sollte ich px oder rem in den clamp-Grenzen verwenden?: rem-Grenzen respektieren die Browser-Schriftgrößeneinstellung des Nutzers, was für die Barrierefreiheit besser ist, daher gibt dieses Tool standardmäßig rem aus. Du kannst die Anzeige auf px umstellen, aber rem-clamp-Grenzen sind die sicherere Wahl für die Textgrößenbestimmung.
Kann ich denselben clamp()-Wert für Ränder und Abstände verwenden?: Ja. clamp() funktioniert für jede Länge, sodass der Wert auf padding, margin, gap und Grid-Tracks ebenso anwendbar ist wie auf font-size. Verwende das Preset für fluide Abstände als Ausgangspunkt und passe die Min- und Max-Größen an.
Welche Root-Schriftgröße sollte ich eingeben?: Verwende, was deine Seite auf dem html-Element setzt — 16px ist der Browser-Standard und der Standard des Tools. Wenn du die Root anderswo skalierst, gib diesen Wert ein, damit die rem-Ausgabe auf die Pixel abbildet, die du tatsächlich siehst.
Werden die Größen, die ich tippe, irgendwohin hochgeladen?: Nein. Der CSS Clamp Calculator läuft vollständig in deinem Browser. Die Viewport-Breiten und Größen, die du eingibst, werden nur zur Berechnung des Werts auf deinem Gerät verwendet und niemals zu ArrayKit gesendet.