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

Generator für Flüssigkeitsabstandsklemme()

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

CSS-clamp() funktioniert für den Abstand genauso wie für die Schriftgröße – die Eigenschaft lautet lediglich „margin“, „padding“ oder „gap“ anstelle von „font-size“. Auf dieser Seite wird der Rechner mit einem Bereich von 8 bis 32 Pixel in einem Ansichtsfenster von 320 bis 1280 Pixel geöffnet. Dies ist ein üblicher Schritt für Abschnittsauffüllungen oder Kartenlücken, die sich auf einem Telefon eng und auf einem Desktop geräumig anfühlen sollten, ohne dass eine Medienabfrage in Sicht ist.

Der zugrunde liegenden Mathematik ist es egal, was die Zahlen darstellen: Dieselbe Steigungs- und Y-Achsen-Schnittpunktformel, die eine fließende Überschriftsgröße erzeugt, erzeugt einen fließenden Abstandswert, daher zeigt die folgende Aufschlüsselung genau, wie 8 Pixel und 32 Pixel in eine kopierfertige Klammer ()-Zeile zum Auffüllen umgewandelt werden: Klammer (...).

Ziehen Sie den Schieberegler für die Breite des Ansichtsfensters, um eine Vorschau des Abstands bei einer beliebigen Breite zwischen den beiden Haltepunkten anzuzeigen, passen Sie die Mindest- und Höchstwerte für einen engeren oder lockereren Bereich an und kopieren Sie die fertige Linie direkt in die Abstandseigenschaft, die sie benötigt.

🛡️
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.