CSS clamp()-Generator
Erzeugen Sie einen fließenden CSS clamp()-Wert, der sich beim Ändern der Viewport-Größe sanft skaliert.
CSS clamp()-Generator
Fließende Typografie und Abstände skalieren einen Wert sanft, wenn sich der Viewport ändert, anstatt zwischen einer Handvoll fester Größen bei verschiedenen Media-Query-Breakpoints zu springen. Dieses Tool erzeugt den Wert für Sie: Geben Sie eine minimale und maximale Größe sowie die Viewport-Breiten ein, bei denen diese gelten, und es gibt eine CSS clamp()-Funktion mit linearer Interpolation dazwischen zurück, bereit zum Einfügen in ein Stylesheet.
Minimale und maximale Größe legen die beiden Enden der Skala fest; minimale und maximale Viewport-Breite legen fest, wo jedes Ende greift — unter der minimalen Breite bleibt der Wert bei seinem Minimum, über der maximalen bei seinem Maximum, und dazwischen wächst er linear mit dem Viewport. Mit Einheit wechseln Sie die Ausgabe zwischen px und rem, wobei die Root-Schriftgröße die px-zu-rem-Umrechnung steuert, und Dezimalstellen kontrollieren die Genauigkeit der erzeugten Zahlen. Das Ausgabeformat umhüllt dasselbe clamp() als einfache Eigenschaft, CSS-Custom-Property oder Tailwind-Arbitrary-Value-Klasse, sodass Sie es direkt in Ihren Code einfügen können.
Wenn Sie die Barrierefreiheitsprüfung aktivieren, wird eine Notiz angezeigt, wenn die Einrichtung Probleme verursachen könnte: px-basierte Größenangaben ignorieren die Browser-Schriftgrößen-Einstellung eines Lesers, und ein zu kleines Minimum bleibt schwer lesbar, bevor es überhaupt zu skalieren beginnt. Beide sind häufige Fehler in handgeschriebenen fließenden Typografie-Formeln, und das Tool kennzeichnet sie, anstatt sie stillschweigend zu versenden.
Alles wird in Ihrem Browser berechnet, während Sie die Optionen anpassen — alles, was Sie eingeben, wird nirgendwohin gesendet. Wenn das Ergebnis richtig aussieht, kopieren Sie es, laden Sie es als .txt-Datei herunter oder senden Sie es zur Eingabe eines anderen Tools, um damit weiterzuarbeiten.