⭐ 0
🔍
Text Bild PDF & Dokumente Audio Musik Elektronik Zeit Dienstprogramme Validatoren Esoterik Spiele

Flüssigkeitsskalengenerator

Berechnen Sie einen echten, flüssigen CSS-clamp()-Wert aus einer minimalen und maximalen Größe über zwei Ansichtsfensterbreiten hinweg, wobei die Neigung und der Schnittpunkt Schritt für Schritt angezeigt werden und eine Live-Größenvorschau angezeigt wird.

Verarbeitung... 0%

Ergebnis

Diese Seite öffnet den Rechner direkt im Schriftskalenmodus mit einer 16-Pixel-Basis und einem bereits ausgewählten Verhältnis von 1,25 (große Terz) – ein solider, weit verbreiteter Ausgangspunkt für eine typografische Skalierung. Allein aus diesen beiden Zahlen werden sechs Größen generiert: klein, Basis, h4, h3, h2 und h1, jede mit ihrem eigenen Fluid-Clamp()-Wert und nicht mit einer einzelnen festen Größe.

Bei jedem Schritt bleibt die Grundgröße auf dem Mobil- und Desktop-Ende auf dem gleichen Wert verankert, während die Überschriften im breiteren Desktop-Darstellungsfenster stärker skaliert werden als im schmalen Mobil-Darstellungsfenster – die gleiche Idee wie die Wahl eines sanfteren Verhältnisses für kleine Bildschirme und eines kräftigeren für große Bildschirme, die automatisch aus dem von Ihnen gewählten Einzelverhältnis abgeleitet wird.

Wenn Sie das Verhältnis auf 1,125, 1,2, 1,333 oder 1,5 ändern, wird die gesamte Tabelle sofort neu generiert, und die Schaltfläche darunter kopiert alle sechs Clamp()-Werte als einen Block mit benutzerdefinierten CSS-Eigenschaften, der sofort eingefügt werden kann, damit der Rest des Stylesheets darauf verweisen kann.

🛡️
Im Browser ausgeführt

Ihre Dateien und Eingaben verlassen dieses Gerät nie. Die Verarbeitung läuft vollständig offline. 100 % sicher.

Akzeptierte Formate & Regeln

  • Echte Fluid-Typografie-Mathematik: Steigung, VW-Koeffizient und Y-Achsen-Schnittpunkt werden explizit angezeigt, nicht nur die letzte Klammer()-Linie.
  • Live-Vorschau: Ziehen Sie den Schieberegler für die Breite des Ansichtsfensters, um die Größenänderung des Beispieltexts genau so zu beobachten, wie dies bei der Größenänderung eines echten Browserfensters der Fall wäre.
  • Typskalierungsmodus: Eine Basisgröße und ein Verhältnis von 1,125 bis 1,5 erzeugen sechs Fluid-Clamp()-Schritte – klein, Basis, h4, h3, h2, h1 – als kopierfertiges CSS.

Wichtigste Vorteile

✓ Die Linie „clamp()“, die Neigungs- und Schnittpunktzahlen sowie die Live-Vorschau werden während der Eingabe aktualisiert – es ist kein Tastendruck erforderlich.
✓ Ein Schieberegler für die Breite des Ansichtsfensters steuert ein Live-Vorschaufeld, sodass Sie die genaue fließende Skalierung zwischen den minimalen und maximalen Haltepunkten in Aktion sehen können, nicht nur eine Formel.
✓ Ein separater Typskalierungsmodus verwandelt eine Basisgröße und ein Basisverhältnis in eine vollständige 6-stufige, fließende Überschriftenskala, die als Block mit benutzerdefinierten CSS-Eigenschaften bereitsteht.

Anwendungsfälle

  • • Verwandeln Sie eine minimale/maximale Schriftgröße und einen Ansichtsfensterbereich in eine echte Clamp()-Linie – einschließlich Steigung, vw-Koeffizient und Schnittpunkt –, anstatt sie aus einem Tutorial zu betrachten.
  • • Ziehen Sie einen Schieberegler für die Breite des Ansichtsfensters, um eine Vorschau einer fließenden Überschrift oder Körpergröße anzuzeigen, die genau so geändert wird, wie es bei der Größenänderung eines echten Browserfensters der Fall wäre, bevor Sie sie in ein Stylesheet übertragen.
  • • Generieren Sie eine vollständige 6-stufige Flüssigkeitstypskala (klein bis h1) aus einer Basisgröße und einem Verhältnis, kopiert als fertig einfügbaren Block mit benutzerdefinierten CSS-Eigenschaften.
  • • Erstellen Sie eine Fluid-Klammer() für den Abstand (Rand, Polsterung, Lücke) anstelle der Schriftgröße – die gleiche Steigungs-/Schnittpunktformel gilt für jede CSS-Eigenschaft.