Responsive CSS-Größe mit clamp() erzeugen

Frontend-Entwickler und Designer nutzen das Werkzeug, wenn Schrift oder Abstände zwischen zwei Grenzen fließend mit dem Viewport skalieren sollen.

Eine responsive CSS-clamp()-Formel können Sie aus zwei Größen erzeugen. Alles läuft in Ihrem Browser, ohne Eingaben hochzuladen oder zu speichern.

Bedienung

Geben Sie die Mindestgröße in Pixeln ein, die Sie auf kleinen Bildschirmen möchten.
Geben Sie die maximale Größe in Pixeln für größere Bildschirme an.
Geben Sie die minimale Viewport-Breite und die maximale Viewport-Breite in Pixeln ein.
Starten Sie den Generator, um eine einsatzbereite CSS-clamp-Deklaration zu erhalten.

Beispiel

Ein häufiges Beispiel definiert eine Textgröße, die zwischen einem kleinen Bildschirm und einem großen Bildschirm skaliert. Kopieren Sie nach der Generierung den clamp-Wert und testen Sie ihn in Ihrem Stylesheet, um zu prüfen, dass der Text der Viewport-Breite wie erwartet folgt.

Eingabe

Ergebnis

clamp(16px, 13.090909px + 0.909091vw, 24px)

Grenzen und Formate

Das Tool generiert nur den Wert für die fluide Größe, nicht das vollständige Layout oder andere Stile.
Die clamp-Funktion muss von dem Browser unterstützt werden, den Ihre Besucher verwenden.
Schlecht gewählte Viewport-Werte können die Skalierung zu schnell oder zu langsam machen.
Testen Sie das Ergebnis immer bei mehreren Bildschirmbreiten, bevor Sie es einsetzen.

Wo die Verarbeitung stattfindet

Die Berechnung des fluiden Werts läuft in Ihrem Browser. Die eingegebenen Abmessungen bleiben auf Ihrem Gerät und werden nicht an einen externen Dienst gesendet. Sie können Ihr CSS vorbereiten, ohne Daten zu übertragen.

Häufige Fragen

Was bedeuten die vier Werte?

Sie geben die minimale und maximale Größe in Pixeln an, dann die minimale und maximale Viewport-Breite. Das Tool verwendet diese Punkte, um eine Progression zwischen den beiden Größen zu erstellen.

Kann ich das Ergebnis für Außenabstände oder Abstände verwenden?

Ja, der generierte Wert kann für eine Textgröße, einen Außenabstand oder einen Abstand verwendet werden, solange die CSS-Eigenschaft eine clamp-Funktion akzeptiert. Passen Sie einfach die Einheit und die Eigenschaft in Ihrem Stylesheet an.

Funktioniert das Ergebnis in jedem Browser?

Die clamp-Funktion wird von modernen Browsern weitgehend unterstützt, ältere Versionen erkennen sie jedoch möglicherweise nicht. Geben Sie einen Ersatzwert an, wenn Sie sehr alte Browser unterstützen müssen.