CSS-clamp()-Generator
Erzeugen Sie einen fließenden CSS-clamp()-Wert aus Min./Max.-Größen und Viewport-Breiten.
Ausgabe
Geben Sie eine Mindest- und Höchstgröße sowie den Viewport-Bereich ein, für den sie gelten, und erhalten Sie einen einsatzbereiten CSS-clamp()-Ausdruck für fließende, responsive Typografie oder Abstände.
Anleitung
- Geben Sie die Mindest- und Höchstgröße in Pixeln ein.
- Geben Sie die minimale und maximale Viewport-Breite ein, zwischen denen die Größen gelten sollen.
- Kopieren Sie die erzeugte clamp()-Deklaration und benennen Sie optional die CSS-Eigenschaft um.
Häufige Fragen
- Wie wird der fließende Wert berechnet?
- Es wird eine lineare Steigung zwischen der Min.- und Max.-Größe über den Viewport-Bereich berechnet, ausgedrückt als rem-+-vw-Formel innerhalb von clamp().
- Warum verwendet die Ausgabe rem und vw?
- rem hält die Basisgröße relativ zu den Schrifteinstellungen des Nutzers, während vw sie gleichmäßig mit der Viewport-Breite skalieren lässt.
- Was, wenn mein maximaler Viewport kleiner als mein minimaler Viewport ist?
- Das Tool zeigt eine Validierungsmeldung an, die Sie bittet, die maximale Viewport-Breite größer als die minimale zu machen.