Fließende CSS-clamp-Werte erzeugen
Einen CSS-clamp()-Wert erzeugen, der Schriftgröße oder Abstand zwischen zwei Viewport-Breiten stufenlos skaliert, in px oder rem.
- Läuft im Browser
- Kein Upload
- Ergebnis bleibt auf deinem Gerät
Datenschutz & GrenzenLäuft in deinem Browser. Nichts wird hochgeladen.
Eingabeinhalte bleiben in diesem Tab; Refentra lädt sie nicht hoch und speichert sie nicht. Optionale aggregierte Aktionszahlen werden nur mit deiner Einwilligung zur Nutzungsmessung gesendet. Leere den Arbeitsbereich anschließend.
Unterstütztes Profil: Eine Einheit, px oder rem; 0≤min≤max, 0<Viewport-Start<Ende. Bei rem sind Viewportgrenzen ebenfalls rem.
Maximal 200.000 UTF-16-Einheiten; Parserlimits können kleiner sein. Worker: 15 Sekunden (Regex 1,5 Sekunden).
Eingabe und Ergebnis nachvollziehen
- Vorbereiten und Vorgang wählen
Bleibe durchgehend bei px oder rem. Wähle die kleinste und die größte Größe sowie die Breiten des Viewports, bei denen die fließende Anpassung beginnt und endet.
- Ein konkretes Beispiel prüfen
Nutze dieses Beispiel und vergleiche das angegebene Ergebnis: min=16 max=32 start=320 end=1280 unit=px → clamp(16px, calc(10.666667px + 1.666667vw), 32px)
- Ausgabe vor dem Übernehmen prüfen
Prüfe die beiden Grenzen des Viewports und Breiten dazwischen. Außerhalb des Bereichs hält clamp die kleinste oder die größte Größe.
Antworten zu dieser Aufgabe
Wovon hängt rem ab?
rem richtet sich nach der Schriftgröße des Wurzelelements. Verwende Einheiten für Viewport und Größe einheitlich und teste den Zoom, statt von einer festen Wurzel mit 16px auszugehen.
Was prüfe ich bei einem Eingabefehler?
Es muss gelten 0≤Minimum≤Maximum und 0<Start-Viewport<End-Viewport. Gleiche Grenzen des Viewports ergeben keine Steigung.
Wo sind die Grenzen dieses Werkzeugs?
Erzeugt wird eine lineare, fließende Größe und keine vollständige responsive Typografie. Zeilenumbrüche, Zoom und die Schrifteinstellungen der Nutzer musst du weiterhin testen.