CSS Clamp Generator
Berechnet automatisch fließende clamp() Funktionswerte für responsives Design.
Werte-Diagramm
Das könnte dir auch gefallen
Echtzeit-Vorschau
Fließende Typografie
Alle Menschen sind frei und gleich an Würde und Rechten geboren.
Das könnte dir auch gefallen
Generierter Code
Das könnte dir auch gefallen
Über dieses Tool
Der CSS Clamp Generator ist ein Tool, das automatisch Code für fließende Typografie und Abstände (Fluid Typography) unter Verwendung der CSS-Funktion clamp() generiert und sich reibungslos an die Viewport-Breite (Bildschirmbreite) anpasst.
Geben Sie einfach die minimalen und maximalen Elementgrößen sowie Viewport-Breiten ein, und die optimale clamp()-Berechnung wird generiert. Sie können den Übergang mit Diagrammen und Echtzeit-Vorschauen intuitiv überprüfen und den Code im Format CSS, als CSS-Variable oder als Tailwind CSS exportieren.
Alle Berechnungen werden in Ihrem Browser ausgeführt. Es werden keine Daten an einen Server gesendet. Es ist keine Kontoregistrierung erforderlich; nutzen Sie es jetzt kostenlos.
Anleitung
Parameter einstellen
Geben Sie die minimalen und maximalen Viewport-Breiten und -Größen ein. Sie können dies auch auf andere Eigenschaften als die Schriftgröße anwenden (z. B. margin, padding).
Diagramm & Vorschau prüfen
Bestätigen Sie den Größenübergang bei verschiedenen Viewport-Breiten visuell anhand des Diagramms. Verwenden Sie den Vorschaubereich, um Viewport-Änderungen zu simulieren.
Code kopieren
Wählen Sie Ihr bevorzugtes Format aus CSS, CSS-Variable oder Tailwind und klicken Sie auf die Schaltfläche Kopieren. Fügen Sie es direkt in Ihr Projekt ein.
Glossar
- clamp()
- Eine CSS-Vergleichsfunktion, die untere und obere Grenzen im Format
clamp(min, preferred, max)festlegt. Es ist eine leistungsstarke Möglichkeit, ohne Media Queries fließende Größenänderungen im responsiven Design zu erzielen. - vw (viewport width)
- Eine CSS-Einheit, die 1 % der Breite des Viewports entspricht. Wenn der Viewport beispielsweise 1000px breit ist, entspricht
1vw10px. Dies ist wichtig für die Berechnung fließender Werte, die an die Bildschirmbreite gebunden sind. - rem
- Eine relative CSS-Einheit basierend auf der Schriftgröße des Stammelements (normalerweise
<html>). Sie wird gegenüber px empfohlen, um die Browsereinstellungen der Benutzer zu respektieren und die Barrierefreiheit zu verbessern. - Fließende Typografie (Fluid Typography)
- Eine Designtechnik, bei der Schriftgrößen basierend auf der Viewport-Breite stufenlos skaliert werden, anstatt sich an bestimmten Haltepunkten (Breakpoints) abrupt zu ändern. Dies gewährleistet eine optimale Lesbarkeit auf jeder Bildschirmgröße.
- preferred value (bevorzugter Wert)
- Der ideale Wert, der als zweites Argument in der
clamp()-Funktion angegeben wird. Dieses Tool berechnet ihn als lineare Funktion im Formatintercept(rem) + slope × 100(vw), was einen reibungslosen Übergang von der minimalen zur maximalen Größe ermöglicht.
Technische Details
Fließende Typografie unter Verwendung der CSS-Funktion clamp() basiert auf der Mathematik einer linearen Funktion.
Herleitung der Formel
Unter Verwendung der minimalen Größe (minSize), der maximalen Größe (maxSize), der minimalen Viewport-Breite (minVW) und der maximalen Viewport-Breite (maxVW) werden Steigung (slope) und Achsenabschnitt (intercept) wie folgt berechnet:
- slope = (maxSize - minSize) / (maxVW - minVW)
- intercept = minSize - slope × minVW
Damit wird der bevorzugte Wert als intercept(rem) + slope × 100(vw) berechnet.
Unterschied zu Media Queries
Herkömmliche @media Queries verursachen abrupte, stufenweise Änderungen an bestimmten Haltepunkten (Breakpoints). clamp() bietet eine reibungslose, lineare Skalierung über jede Viewport-Breite hinweg. Dies reduziert die benötigte Code-Menge drastisch und verbessert die Wartbarkeit.
FAQ
- Q.Werden meine Daten an einen Server gesendet?
- Nein. Alle Berechnungen werden vollständig in Ihrem Browser abgeschlossen. Es werden keine Daten nach außen gesendet. Die Nutzung ist völlig sicher.
- Q.Funktioniert dies im Internet Explorer?
- Nein. Der Internet Explorer unterstützt die
clamp()-Funktion nicht. Bitte verwenden Sie moderne Browser wie Chrome, Firefox, Safari oder Edge. - Q.Kann ich dies auch für andere Eigenschaften als font-size verwenden?
- Ja.
clamp()kann für jede CSS-Längeneigenschaft verwendet werden, einschließlichpadding,margin,gapundwidth. Sie können die Ziel-Eigenschaft auswählen, um den entsprechenden Code zu generieren. - Q.Warum verwendet die Ausgabe rem anstelle von px?
- Die Verwendung von rem wird aus Gründen der Barrierefreiheit empfohlen. Wenn Benutzer ihre Standardschriftgröße in den Browsereinstellungen erhöhen, ignorieren px-Werte dies, während rem-Werte entsprechend skalieren.
- Q.Wie funktioniert die zugrunde liegende Mathematik?
- Das Tool berechnet die „Steigung“ (slope) und den „Achsenabschnitt“ (intercept) einer linearen Gleichung unter Verwendung der angegebenen minimalen/maximalen Viewport-Breiten und -Größen, um einen
bevorzugten Wertmit vw-Einheiten zu generieren. Dies führt zu einer proportionalen Skalierung zwischen den definierten Grenzen.
Anwendungsfälle
📱Responsives Webdesign
Skalieren Sie Überschriften und Fließtext fließend von Mobilgeräten bis zum Desktop mit nur einer einzigen Zeile CSS und machen Sie komplexe Media Queries überflüssig.
🧩Design-Systeme
Verwalten Sie Ihre gesamte Typografieskala zentral mit clamp(). Exportieren Sie sie als CSS-Variablen, um sie sofort als Design-Tokens in Ihrem gesamten Projekt zu integrieren.
📏Fließende Abstände
Wenden Sie clamp() auf padding, margin und Grid-gaps an, um schöne Layouts zu erstellen, die proportional über den gesamten Bildschirm skalieren.
🤝Barrierefreiheit
Indem Sie sich auf eine rem-basierte Ausgabe verlassen, respektieren Sie die Standard-Schriftgrößeneinstellungen des Benutzers im Browser und bieten ein benutzerfreundliches und WCAG-konformes responsives Design.
Feedback senden
Teilen Sie Ihre Gedanken mit, um das Tool zu verbessern.
Feedback ist vorübergehend ausgesetzt
Der Server ist ausgelastet oder der Spam-Schutz ist aktiv. Bitte versuchen Sie es später erneut.