Generieren Sie ein clamp(), das Text nahtlos von kleinen bis zu großen Bildschirmen skaliert.
clamp(min, preferred, max) nutzt den bevorzugten Wert, hält ihn jedoch stets innerhalb des Min–Max-Bereichs. Mit einem bevorzugten Wert aus rem + vw wächst der Text linear mit der Viewport-Breite und stoppt an beiden Enden. Eine einzige Zeile ersetzt zahlreiche Media Queries.
Eine Gerade durch (Min-Viewport, Min-Größe) und (Max-Viewport, Max-Größe). Steigung = (Max-Größe − Min-Größe) ÷ (Max-Viewport − Min-Viewport). Steigung × 100 ergibt den vw-Koeffizienten; der y-Achsenabschnitt ist der feste Anteil.
rem skaliert mit, wenn Nutzer die Basisschriftgröße in ihrem Browser anpassen. Feste px-Werte ignorieren diese Einstellung – ein Barrierefreiheitsproblem. Nutzen Sie rem, sofern kein triftiger Grund dagegen spricht.
Reines vw wird auf kleinen Bildschirmen zu klein und auf großen Bildschirmen zu groß. clamp begrenzt die Extremwerte.
Ja – dieselbe Mathematik gilt auch für padding, gap und margin.
Alle gängigen Browser seit 2020. Nicht im IE, der jedoch ohnehin veraltet ist.
Geben Sie einfach Ihre minimale und maximale Schriftgröße zusammen mit den zugehörigen minimalen und maximalen Viewport-Breiten ein.
Ja, über eine Kopier-Schaltfläche können Sie die generierte clamp()-CSS-Regel direkt kopieren.
Die generierte Formel kombiniert rem- und vw-Einheiten, um eine nahtlose Skalierung zwischen den festgelegten Minimal- und Maximalwerten zu ermöglichen.
Nein, der CSS-clamp-Rechner ist völlig kostenlos und ohne Registrierung direkt im Browser nutzbar.