Kategorie: Entwicklung
Fließender-Abstand-Skala-Generator
Einen Satz clamp()-basierter Abstands-Tokens erstellen
Geben Sie eine Basis-Abstandsgröße bei einem schmalen und einem breiten Viewport sowie ein Skalierungsverhältnis an und erhalten Sie einen vollständigen Satz von --space-*-Custom-Properties, jede ihr eigenes clamp(), das sanft zwischen den beiden skaliert, fertig zum Einfügen in :root.
| Token | Ausgabe |
|---|---|
| --space-3xs | clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem) |
| --space-2xs | clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem) |
| --space-xs | clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem) |
| --space-sm | clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem) |
| --space-md | clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem) |
| --space-lg | clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem) |
| --space-xl | clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem) |
| --space-2xl | clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem) |
| --space-3xl | clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem) |
:root {
--space-3xs: clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem);
--space-2xs: clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem);
--space-xs: clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem);
--space-sm: clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem);
--space-md: clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem);
--space-lg: clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem);
--space-xl: clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem);
--space-2xl: clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem);
--space-3xl: clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem);
}Jedes Token ist ein eigenes clamp(), sodass jeder Schritt sanft zwischen den beiden Viewport-Breiten skaliert.
Alles auf dieser Seite wird in Ihrem Browser verarbeitet. Nichts wird hochgeladen.
Wozu dieses Werkzeug dient
Ein einzelnes fließendes clamp() ist für einen Wert nützlich, aber die meisten Layouts brauchen eine ganze Skala konsistenter Abstandsschritte, und ein clamp() für jeden von Hand zu schreiben vervielfacht dieselben Rechenfehler über jedes Token hinweg. Dieses Werkzeug nimmt eine Basisgröße an jedem Ende Ihres Viewport-Bereichs sowie ein Verhältnis und erzeugt daraus eine symmetrische Skala von Tokens um einen mittleren Schritt herum, genau wie eine Schriftskala aufgebaut wird, sodass der ganze Satz proportional konsistent bleibt, während sich der Viewport ändert.
So funktioniert es
- Legen Sie die Basis-Abstandsgröße bei Ihrer schmalen und breiten Viewport-Breite fest.
- Legen Sie das Skalierungsverhältnis zwischen den Schritten fest.
- Kopieren Sie den erzeugten :root-Block der --space-*-Custom-Properties.
Datenschutz
Dieses Werkzeug läuft vollständig in Ihrem Browser. Ihre Eingabe wird nie hochgeladen, gespeichert oder weitergegeben – beim Schließen des Tabs ist sie weg.
Häufig gestellte Fragen
- Warum neun Schritte?
- Neun ergibt vier Schritte unter- und oberhalb eines mittleren Werts, was die meisten Layouts von engen Inline-Abständen bis zu großen Abschnittsabständen abdeckt, ohne später zusätzliche Namen erfinden zu müssen.
- Wird etwas an einen Server gesendet?
- Nein. Jedes clamp() wird auf der Seite aus den eingegebenen Zahlen berechnet, weshalb sich Tabelle und CSS-Ausgabe sofort aktualisieren.
- Kann ich diese Werte auch mit dem CSS-Clamp-Generator verwenden?
- Ja. Dieses Werkzeug baut aus einem Satz von Eingaben eine ganze Skala; der CSS-Clamp-Generator ist für einen einzelnen, einmaligen Wert wie eine Überschriftgröße gedacht und nutzt dieselbe zugrunde liegende Mathematik.