Wichtige Fakten
- Kategorie
- Design & Farbe
- Eingabetypen
- number, text
- Ausgabetyp
- json
- Sample-Abdeckung
- 4
- API verfügbar
- Yes
Überblick
Der CSS-Fluid-Typography-Clamp-Rechner berechnet präzise CSS-clamp()-Ausdrücke für eine stufenlose Schriftgrößenanpassung. Durch die Eingabe von minimalen und maximalen Viewport-Breiten sowie den gewünschten Schriftgrößen ermittelt das Tool die optimale Steigung in vw und den Achsenabschnitt in rem, um ein harmonisches, responsives Schriftbild ohne komplexe Media Queries zu erzeugen.
Wann verwenden
- •Wenn Sie responsive Schriftgrößen implementieren möchten, die sich fließend an die Bildschirmgröße anpassen, anstatt abrupt bei Breakpoints umzuspringen.
- •Bei der Erstellung von Design-Systemen oder CSS-Frameworks, die konsistente typografische Skalierungen über verschiedene Endgeräte hinweg erfordern.
- •Wenn Sie manuelle mathematische Berechnungen für die CSS-Funktion clamp() vermeiden und direkt kopierbaren CSS-Code generieren möchten.
So funktioniert es
- •Geben Sie die minimale und maximale Viewport-Breite sowie die dazugehörigen minimalen und maximalen Schriftgrößen in Pixeln ein.
- •Legen Sie optional die Root-Schriftgröße fest, um eine korrekte Umrechnung in die relative Einheit rem zu gewährleisten.
- •Das Tool berechnet automatisch die Steigung und den Achsenabschnitt und gibt den fertigen clamp()-Ausdruck sowie eine Live-Vorschau aus.
Anwendungsfälle
Erstellung von fließenden Überschriften, die auf Smartphones lesbar sind und auf Desktop-Monitoren ihre volle Wirkung entfalten.
Definition von flexiblen Fließtexten in modernen Web-Layouts ohne den Einsatz von verschachtelten CSS Media Queries.
Standardisierung von Abständen und Schriftgrößen in UI-Kits und CSS-Variablen für konsistente Frontend-Entwicklung.
Beispiele
1. Fluide Hauptüberschrift für Landingpages
Frontend-Entwickler- Hintergrund
- Eine neue Landingpage soll auf Mobilgeräten eine gut lesbare Überschrift von 24px haben, die auf großen Desktop-Bildschirmen fließend auf 48px anwächst.
- Problem
- Die manuelle Berechnung der CSS-Formel für clamp() mit der korrekten Steigung in vw ist fehleranfällig und zeitaufwendig.
- Verwendung
- Tragen Sie 360 für den minimalen Viewport und 1440 für den maximalen Viewport ein. Setzen Sie die minimale Schriftgröße auf 24 und die maximale auf 48. Kopieren Sie den ausgegebenen CSS-Code.
- Beispielkonfiguration
-
minViewportPx: 360, maxViewportPx: 1440, minFontPx: 24, maxFontPx: 48, rootFontPx: 16 - Ergebnis
- Sie erhalten den CSS-Ausdruck clamp(1.5rem, 1rem + 2.2222vw, 3rem), der direkt in die CSS-Klasse der Überschrift eingefügt werden kann.
2. Barrierefreie Fließtext-Skalierung
Webdesigner- Hintergrund
- Der Fließtext eines Blogs soll sich dynamisch zwischen 16px (bei 400px Viewport) und 20px (bei 1200px Viewport) anpassen.
- Problem
- Es soll sichergestellt werden, dass die Schriftgröße auf kleinen Bildschirmen nicht zu klein wird und auf großen Bildschirmen nicht übermäßig wächst, während die Barrierefreiheit durch rem-Einheiten gewahrt bleibt.
- Verwendung
- Geben Sie 400 und 1200 als Viewport-Grenzen ein, wählen Sie 16 und 20 als Schriftgrößen-Grenzen und belassen Sie die Root-Schriftgröße bei 16.
- Beispielkonfiguration
-
minViewportPx: 400, maxViewportPx: 1200, minFontPx: 16, maxFontPx: 20, rootFontPx: 16 - Ergebnis
- Das Tool generiert clamp(1rem, 0.8rem + 0.5vw, 1.25rem), wodurch der Text stufenlos skaliert und die Barrierefreiheitsrichtlinien erfüllt werden.
Mit Samples testen
textBulma CSS Framework Beispiele
Bulma CSS-Framework-Beispiele einschließlich Spalten, Komponenten, Formular-Steuerelemente, Layout-System und moderne CSS-basierte Design-Muster
title token css
Milligram CSS Framework Beispiele
Milligram CSS-Framework-Beispiele einschließlich Typografie, Formulare, Grids und Komponenten
title token css
CSS-Selektor-Beispiele
Sammlung von CSS-Selektor-Beispielen für Extraktions- und Analysetests
title token css
Tailwind CSS Samples
Tailwind CSS examples - Utility-first CSS framework with responsive design, components, and custom configurations
title token css
Verwandte Hubs
Textfall-, Encoding- und Normalisierungs-Konvertierungs-Tools
Vergleichen Sie Textfall-Konvertierung, Zeichenbreiten-Konvertierung, Encoding-Konvertierung, Quoted-Printable-Verarbeitung und Inline-Textnormalisierung in einem Hub.
Text-Tools
Entdecken Sie 33 text-Tools für utility-Workflows und vergleichen Sie ähnliche Utilities schnell.
Textanalyse-, Lesbarkeits- und Inhaltsinspektions-Tools
Vergleichen Sie Textstatistik, Spracherkennung, Lesbarkeitsbewertung, Sentimentanalyse, Moderationsprüfung und Musteranalyse in einem Hub.
Text-Redaktions-, Hervorhebungs- und Darstellungsformatierungs-Tools
Vergleichen Sie Tools zum Maskieren sensibler Texte, Finden von PII, Normalisieren von Telefonnummern, Hervorheben von Phrasen, Zentrieren von Text und Formatieren von Diffs in einem Hub.
FAQ
Was bewirkt die CSS-Funktion clamp() bei Schriftgrößen?
Sie begrenzt die Schriftgröße auf einen definierten Mindest- und Höchstwert und lässt sie dazwischen linear mit der Viewport-Breite skalieren.
Warum wird die Root-Schriftgröße benötigt?
Sie dient als Basis (meist 16px), um Pixel-Werte präzise in barrierefreie rem-Einheiten für den CSS-Ausdruck umzurechnen.
Kann ich den berechneten Code direkt in mein Stylesheet kopieren?
Ja, der generierte clamp()-Ausdruck kann direkt als Wert für die CSS-Eigenschaft font-size eingefügt werden.
Was passiert, wenn der Viewport kleiner als das Minimum ist?
Die Schriftgröße bleibt konstant auf dem definierten minimalen Pixelwert stehen und unterschreitet diesen nicht.
Unterstützt das Tool auch andere Einheiten als Pixel für die Eingabe?
Nein, die Eingabewerte für Viewport und Schriftgröße müssen in Pixel (px) angegeben werden, um die mathematische Umrechnung korrekt durchzuführen.