CSS-Klemmgenerator

Ein CSS-Clamp () - Generator baut eine einzelne Clamp (Minimum, Preferred, Maximum) - Deklaration, die einen Wert zwischen zwei Bildschirmbreiten glatt skaliert, statt mehrere Medienabfragen zu schreiben, um eine Überschrift von 24 px auf Telefonen auf 48 px auf Desktops zu schreiten, setzt man eine Mindestgröße, eine maximale Größe, und den Viewport-Bereich, dem sie zuordnen, und der Generator gibt eine CSS-Zeile zurück, die jede Größe dazwischen interpoliert.

Die Funktion clamp () nimmt drei Argumente an: eine Untergrenze, einen bevorzugten Wert und eine Obergrenze Der Browser verwendet den bevorzugten Wert, es sei denn, er fällt unter das Minimum oder über das Maximum, in diesem Fall sperrt er an diese Grenze Dieser Generator berechnet den bevorzugten Wert als lineare Funktion des Ansichtsfensters, wobei er einen festen rem-Term mit einem vw-Term kombiniert, sodass das Ergebnis im Gleichschritt mit dem Fenster wächst, während es niemals unter Ihr Minimum fällt oder Ihr Maximum überschreitet Diese Technik wird oft als Fluidtypographie bezeichnet, obwohl sie für Ränder, Polsterung, Lücken und Breiten gleichermaßen gut funktioniert.

Alles wird in Ihrem Browser mit clientseitigem JavaScript berechnet, sodass nichts, was Sie eingeben, hochgeladen wird und das Tool nach dem Laden offline funktioniert. Sie können Größen in Pixeln oder Rem eingeben, eine benutzerdefinierte Stammschriftgröße festlegen und eine Vorschautabelle lesen, in der der berechnete Wert angezeigt wird bei gemeinsamen Ansichtsportbreiten, sodass Sie das Kurvenverhalten bestätigen können, bevor Sie die Klemme () in Ihr Stylesheet einfügen.

Die Flüssigkeitsgröße hat eine Barrierefreiheitsfalle, die es wert ist, bewusst vermieden zu werden Ein Klemmausdruck, dessen mittlerer Begriff rein in Viewport-Einheiten ausgedrückt wird, ignoriert die Schriftgrößeneinstellung des Lesers, da vw nicht darauf reagiert, und Text, der nicht wachsen kann, schlägt fehl WCAG 1.4.4. Eine rem-Komponente im Vorzugswert zu halten, was die generierte Ausgabe tut, bedeutet, dass die Größe immer noch auf Browserzoom und auf eine größere Standardschrift reagiert Setzen Sie immer beide Grenzen: Ohne sie skaliert der Wert in beide Richtungen unbegrenzt.

Hier ist der CSS-Klemmgenerator auf einer echten Überschrift Geben Sie 24 und 48 px als Größen ein, 360 und 1440 als Ansichtsfenster, behalten Sie die 16 px-Wurzel, und drücken Sie Klemme erzeugen ().Die Ausgabe ist Schriftgröße: Klemme (1,5 rem, 1rem + 2,2222 vw, 3rem); Die Vorschautabelle bestätigt es: 24 px bei 360, 33,07 px bei 768, 38,76 px bei 14, 4 bleibt die Überschrift und 160.