CSS-clamp()-Rechner
Geben Sie eine Größe für kleine und große Bildschirme ein und erhalten Sie einen flüssigen clamp()-Wert, der dazwischen stufenlos skaliert – für Schriftgrößen, Padding, Margins oder Gaps.
clamp(1rem, 0.8333rem + 0.8333vw, 1.5rem)Das Ergebnis behält einen rem-Anteil im mittleren Term bei, sodass sich der Text beim Zoomen auf 200 % weiterhin vergrößert – ein reiner Viewport-Wert würde dies verhindern.
Flüssiger Text, perfekt skaliert.
Die Berechnung läuft vollständig in Ihrem Browser. Keine Ihrer Eingaben wird an BroBroGo übertragen.
FAQ
Wie berechnet das Tool den clamp()-Wert?
Sie definieren zwei Punkte: eine Größe bei geringer Bildschirmbreite und eine Größe bei großer Bildschirmbreite. Der Rechner ermittelt eine gerade Linie dazwischen, sodass die Größe mit zunehmender Bildschirmbreite fließend ansteigt. Dies wird in clamp() verpackt, damit der Wert nie unter die Mindestgröße fällt oder über die Maximalgröße steigt. Zwischen den beiden Breiten skaliert die Größe flüssig, außerhalb verbleibt sie am jeweiligen Limit.
Warum ist das Ergebnis in rem und vw statt in Pixeln angegeben?
Die Grenzwerte werden in rem angegeben und der variable Mittelteil behält eine rem-Komponente. Dadurch wächst der Text auch dann, wenn Leser im Browser zoomen oder die Standardschriftgröße erhöhen – ein reiner Pixel- oder Viewport-Wert kann dies verhindern. Sie geben die Größen in Pixeln ein, da dies der gängigen Praxis entspricht, und das Tool konvertiert sie basierend auf Ihrer Root-Schriftgröße in rem.
Kann ich dies auch für Abstände statt nur für Schriftgrößen nutzen?
Ja. Derselbe Wert funktioniert für Padding, Margin, Gap, Breite oder Höhe – überall dort, wo Längenangaben verwendet werden. Schalten Sie die Vorschau auf „Box“ um, um zu sehen, wie sich die Abstände anstelle des Textes verändern. Wenn Ihre Mindest- und Maximalgrößen identisch sind, reduziert sich das Ergebnis auf eine feste Länge, da nichts zu skalieren ist.
Unterstützen alle Browser clamp()?
Ja – alle modernen Browser unterstützen clamp() seit 2020, sodass Sie den Wert direkt ohne Fallback verwenden können. Bei sehr großen Maximalwerten oder einer schnellen Skalierung empfiehlt sich eine kurze Prüfung bei 200 % Zoom, um sicherzustellen, dass der Text für Nutzer, die darauf angewiesen sind, lesbar bleibt.