CSS Clamp

Generate responsive CSS clamp() values for fluid typography

Über diesen Rechner

Der CSS-Clamp-Rechner erzeugt einen fluiden clamp(min, bevorzugt, max)-Ausdruck, der einen Wert linear zwischen zwei Viewport-Breiten skaliert. Geben Sie den minimalen und maximalen Wert (rem oder px) und den Viewport-Bereich an, und er leitet die vw-Steigung und den Achsenabschnitt der Geraden durch beide Punkte ab, plus die berechneten Werte an jedem Breakpoint als Plausibilitätsprüfung. Für rem wird eine Root-Schriftgröße von 16px angenommen. Vertauschte Bereiche liefern Validierungsfehler. Ideal für fluide Typografie und Abstände.

So nutzen Sie das CSS Clamp-Tool

  1. Geben Sie Ihre Eingabe in das Feld ein oder fügen Sie sie ein.
  2. Lesen Sie die Ausgabe ab — sie aktualisiert sich sofort, während Sie tippen.
  3. Passen Sie die Optionen, falls vorhanden, an Ihren Anwendungsfall an.
  4. Kopieren Sie die URL der Seite, um das exakte Ergebnis zu teilen.

Häufige Beispiele

  • 1rem bei 320px → 2rem bei 1280px → clamp(1rem, 1.6667vw + 0.6667rem, 2rem)
  • 1.25rem bei 375px → 3rem bei 1440px → clamp(1.25rem, 2.6291vw + 0.6338rem, 3rem)
  • 16px bei 320px → 32px bei 1200px → clamp(16px, 1.8182vw + 10.1818px, 32px)

Häufig gestellte Fragen

Wie funktioniert das CSS Clamp-Tool?

Geben Sie Ihre Eingabe ein oder fügen Sie sie ein, und das Tool verarbeitet sie direkt in Ihrem Browser und zeigt das Ergebnis sofort an. Nichts von dem, was Sie eingeben, wird auf einen Server hochgeladen — die gesamte Berechnung findet auf Ihrem Gerät statt.

Wann brauche ich das CSS Clamp-Tool?

Es ist praktisch für Entwicklung, Debugging, Design und Administrationsaufgaben — immer wenn Sie diese Umwandlung oder Prüfung schnell erledigt brauchen, ohne etwas zu installieren oder Ihre Daten einem Drittanbieterdienst anzuvertrauen.

Wie zuverlässig sind die Ergebnisse?

Das Tool implementiert den einschlägigen Standard oder die Spezifikation direkt, sodass seine Ausgabe dem entspricht, was konforme Software erzeugt. Randfälle wie leere oder fehlerhafte Eingaben werden klar gemeldet, statt still zu scheitern.

Kann ich ein bestimmtes Ergebnis mit jemand anderem teilen?

Ja. Ihre Eingabe aktualisiert die URL — wenn Sie die Adressleiste kopieren und den Link teilen, öffnet sich das Tool für jeden, der ihn anklickt, im selben Zustand.