Was ist Clamp () in CSS (und wie man es benutzt)

Wenn Sie jemals versucht haben, Ihre Website sowohl auf Telefonen als auch auf Riesenmonitoren gut aussehen zu lassen, haben Sie gesehen, wie Abstand bricht, Schriftarten drastisch schrumpfen oder übermäßig skalieren und Elemente entweder überwältigen oder verschwinden. Um all das zu beheben, schreiben Sie am Ende eine lange Liste von Medienabfragen für ein Layout. Dort kann Clamp () helfen.

Es ist eine CSS -Funktion, die die Einstellungsgrößen vereinfacht. Anstatt mehrere Werte an festen Haltepunkten zu definieren, können Sie ein Minimum, ein bevorzugtes und ein Maximum festlegen, sodass Ihre Elemente nach dem Bildschirm ändert. Das Beste daran ist, dass sie innerhalb Ihrer definierten Grenzen bleiben, sodass es keine Layout -Inkonsistenzen gibt.

In diesem Beitrag werden wir erklären, wie Clamp () funktioniert, warum es oft effizienter sein kann als Medienabfragen und wie DIVI 5 sie verwenden kann, ohne eine einzelne Codezeile zu schreiben!

Was ist Clamp ()

clamp () ist eine native Funktion in CSS, mit der reaktionsschnelle Werte definiert werden, die basierend auf der Bildschirmgröße anpassen. Anstatt eine einzelne Zahl festzuhalten, geben Sie dem Browser einen Bereich, mit dem Sie einen Mindestwert, einen skalierbaren bevorzugten Wert und einen maximalen Wert festlegen können. Diese machen Ihr Layout flexibler und Sie müssen für jede Bildschirmgröße nicht mehrere Medienabfragen schreiben.

Lassen Sie uns dies mit einem Beispiel für eine flüssige Schriftgröße verstehen, die basierend auf der Bildschirmgröße zunimmt/abnimmt.

font-size: clamp(40px, 7vw, 100px);

Hier wird die Schriftgröße niemals unter 40px liegen, auf Basis von 7% der Ansichtsfensterbreite skalieren und nicht mehr wachsen, sobald sie 100px erreicht.

Ein weiterer großer Vorteil der Verwendung von Clamp () ist, dass es im Gegensatz zu Medienfragen die starren Sprünge vermeidet und Ihre Stile vorhersehbarer und lesbarer hält.

Was meinen wir damit? Lassen Sie uns dies verstehen, indem Sie Clamp () mit Medienfragen vergleichen.

Vergleich von Clamp () und Medienfragen

Medienabfragen sind eine weitere häufige Möglichkeit, Schriftgrößen für verschiedene Bildschirmbreiten anzupassen. Hier definieren Sie Haltepunkte an bestimmten Bildschirmbreiten, in denen sich Ihre Stile ändern. Sie können beispielsweise eine Schriftgröße für den Desktop, eine andere für Tablet und eine dritte für Mobilgeräte zuweisen, so dass sich die Schriftgröße nur dann ändert, wenn die Bildschirmbreite auf jeden Haltepunkt trifft.

Diese Methode funktioniert, aber es ist nicht fließend. Zwischen 1000px und 501px bleibt die Schriftgröße bei 100px gesperrt. In dem Moment, in dem der Bildschirm 500px erreicht, fällt die Schrift abrupt auf 30px. Dies bedeutet keinen reibungslosen Übergang, nur eine scharfe Änderung.

Wenn Sie also die Skalierung natürlicher anfühlen möchten, müssen Sie mehrere Haltepunkte hinzufügen und die Schriftgröße an jedem manuell anpassen. Das würde Ihren Code langwierig und aufgebläht machen.

Im Gegensatz dazu rettet Clamp () Sie vor abrupten Übergängen und langwierigen Code. Tatsächlich kann es in einer einzigen Zeile geschrieben werden: Schriftgröße: Clamp (30px, 7VW, 100px).

Dies teilt dem Browser mit, die Schrift zwischen 30px und 100px basierend auf 7 Prozent der Ansichtsfensterbreite zu skalieren. Die Schriftgröße passt flüssig über alle Bildschirmgrößen ohne abrupte Sprünge oder die Notwendigkeit mehrerer Haltepunkte. Sie definieren immer noch die Grenzen, aber die Skalierung dazwischen ist automatisch und konsistenter.

In Live Action ist ein Vergleich zwischen der Schriftgrößenänderung von Medienabfrage -Haltepunkten und Clamp () aus:

Für die Reaktionsänderung macht Clamp () einen merklichen Unterschied. Anstatt auf feste Bildschirmbreiten zu warten, um Änderungen des Stils auszulösen, reagiert es auf jedes dazwischen liegende Pixel. Dies hält Ihren Code sauberer und Ihr Design auf allen Geräten konsistenter. Darüber hinaus wird es von den meisten modernen Browsern häufig unterstützt, was bedeutet, dass es bei diesen Browsern gut macht , was es zu einem zuverlässigen und praktischen Ersatz macht.

Wie Clamp () hinter den Kulissen funktioniert

clamp () nimmt drei Werte mit, die zusammenarbeiten, um jede CSS -Eigenschaft zu skalieren:

 clamp(minimum, preferred, maximum) 

Jeder Teil der Funktion spielt eine bestimmte Rolle:

• Minimalwert: Der niedrigstmögliche Wert. Das Element skaliert nicht unter diesem Punkt, egal wie klein der Bildschirm ist.
• Bevorzugter Wert: Dieser Wert skaliert auf der Bildschirmgröße. Es wird normalerweise unter Verwendung von relativen Einheiten wie VW oder einem Calc () -Spression eingestellt, um freie Fluidität zu ermöglichen.
• Maximaler Wert: Die höchste zulässige Größe. Selbst auf sehr großen Bildschirmen wird das Element diesen Wert nicht überschreiten.

Wenn der Browser die endgültige Größe berechnet, bewertet er zuerst den bevorzugten Wert. Der Browser verwendet das Minimum, wenn die Bildschirmgröße so klein ist, dass der bevorzugte Wert unter das Minimum fällt. Wenn der Bildschirm so weit ist, dass der bevorzugte Wert das Maximum überschreitet, bleibt er dabei.

Dies macht das Verhalten vorhersehbar. Sie wissen immer, dass Ihr Design in Ihrem definierten Bereich bleibt, aber Sie erhalten eine flexible Skalierung zwischen diesen Grenzen. Durch das Festlegen von minimalen und maximalen Grenzen stellt Clamp () sicher, dass Ihre Elemente flüssig, aber nie zu viel skalieren. Gerade genug.

Auswahl des richtigen bevorzugten Wertes

Möglicherweise haben Sie bemerkt, dass der bevorzugte Wert (der mittlere) in all dem eine größere Rolle spielt. Es entscheidet, wie Elemente skalieren.

Erstens sollte es kein fester Wert wie die Klemme (40px, 80px , 120px) sein, da in diesem Fall der bevorzugte Wert überhaupt nicht skaliert wird. Da 80px bereits zwischen der Grenze fällt, sperrt der Browser ihn ein und ignoriert Änderungen der Bildschirmgröße. Dies führt zu einem statischen Wert, der den Zweck der Verwendung von Clamp () in erster Linie besiegt.

Stattdessen sollte der bevorzugte Wert immer relativ sein , wie in der Klemme (40px, 7VW , 120px). Hier reagiert 7VW auf die Breite des Ansichtsfenfers, wodurch das Element reibungslos über Bildschirmgrößen skaliert wird. Die Klemmenfunktion stellt dann sicher, dass sie nie unter 40px oder über 120px liegt und die Größe auf 7% der Breite des Bildschirms reagiert.

Sie müssen auch die Größe des relativen Werts berücksichtigen. Beispielsweise skaliert ein kleinerer Wert wie 2 VW das Element allmählich über die Bildschirmgrößen, während ein größerer Wert wie 6 VW eine schnellere Skalierung verursacht und die maximale Größe früher erreicht. Um zu ermitteln, welche Skalierung für Sie funktioniert, probieren Sie den Fluid -Tarifrechner. Sie können eine Vorschau auf unterschiedliche Werte vorschauen und CSS-Ready-to-Nutzung-CSS exportieren.

HINWEIS: Der Taschenrechner des Flüssigkeitstyps gibt VI -Werte aus. Wenn Sie die generierte Ausgabe in Divi verwenden, ändern Sie die VI -Einheiten in VW.

Verschiedene Arten von Einheiten in Clamp ()

Die Einheiten innerhalb der Klammer () beeinflussen, wie sie sich über Geräte hinweg verhält. Hier sind alles, was Sie verwenden können:

In den meisten Fällen verwenden Entwickler PX für die minimalen und maximalen Werte und eine flüssige Einheit wie VW für den bevorzugten Wert. Dies gibt das beste Gleichgewicht zwischen Kontrolle und Reaktionsfähigkeit.

Sie können jedoch auch relative Einheiten für Min- und Max -Werte wie Clamp (2REM, 4REM, 8REM) verwenden. Dies erleichtert Ihr Design zugänglich und leichter zu skalieren, wenn sich die Root -Schriftgröße ändert. Es ist besonders nützlich für Benutzer, die die Browsereinstellungen für die Lesbarkeit anpassen.

Clamp () in Divi 5

Die CLAMP () -Funktion in CSS ist unglaublich nützlich, aber nur, wenn Sie sich bequem Code schreiben. Was ist mit denen, die ihre Websites vorziehen, ohne ein Stylesheet zu berühren? Möchten Sie Flüssigkeitslayouts mit Clamp () erstellen, ohne Code zu schreiben?

Wenn ja, können die fortgeschrittenen Einheiten von Divi 5 helfen.

Abonnieren Sie unseren YouTube -Kanal

Kurz gesagt, Divi 5 unterstützt Clamp () als fortgeschrittene Einheit über den Bauunternehmer, und es ist super einfach, auf sie zuzugreifen. Wo immer Sie einen numerischen Wert wie Schriftgröße, Abstand oder Abschnittsbreite eingeben können, finden Sie die Option, Clamp () direkt zu verwenden.

Klicken Sie einfach in das Feld Eingabe, um aus den verschiedenen in Divi 5 verfügbaren erweiterten Einheiten auszuwählen (siehe die dunkelfarbene Liste neben der Heading-Textgröße) , ändern Sie den Einheitstyp und definieren Sie Ihr Minimum, bevorzugte und maximale Werte.

Und das war's! Kein Codieren oder CSS überhaupt - alles, was Sie getan haben, war, einen Klemmwert () zu betreten, und Ihre Überschrift wurde einfach so flüssig.

Divi 5 erleichtert es einfach, flüssige, reaktionsschnelle Designs zu erstellen, ohne benutzerdefinierte CSS zu schreiben. Sie erhalten die Flexibilität eines Clamps () mit der Einfachheit eines visuellen Editors. (Divi 5 unterstützt viele andere fortgeschrittene Einheiten, einschließlich Clamp ()).

Erfahren Sie alles über die fortgeschrittenen Einheiten von Divi 5

Wie benutze ich Clamp () in Divi 5?

Inzwischen haben Sie gesehen, wie einfach es ist, Clamp () in Divi 5 zu verwenden. Kein benutzerdefinierter Code, keine CSS -Dateien, nur eine saubere, visuelle Schnittstelle.

Aber was Clamp () in Divi wirklich kraftvoll macht, ist nicht nur die Funktion selbst. Es ist das, womit es funktioniert.

Divi 5 basiert auf einem modularen Designsystem. Dies bedeutet, dass Sie Clamp () mit anderen erweiterten Funktionen wie Entwurfsvariablen und CSS -Funktionen wie Calc () kombinieren können, um Ihr Layout nicht nur ansprechend, sondern auch konsistent und einfach zu skalieren. Und hier wird es interessant - Divi 5 macht es einfach, die Klammer () in Ihren Workflow einzubauen.

clamp () funktioniert mit Designvariablen

Die beste und effizienteste Möglichkeit, Clamp () effektiv in Divi 5 zu verwenden, besteht darin, es mit Designvariablen zu kombinieren.

Mit Designvariablen können Sie globale Werte (wie Typografie, Farben und sogar Schriftgrößen) definieren, damit Sie sie auf Ihrer Website verwenden können, um sie konsistent zu halten. Sie können auch Clamp () -Werte als Zahlenvariablen speichern. Auf diese Weise können Sie reaktionsschnelle globale Werte so speichern, dass alle Instanzen gleichzeitig aktualisiert werden.

Zum Beispiel definieren Sie Clamp () Größen für H1-H6-Überschriften wie folgt:

Und speichern Sie sie im Variablenmanager im Divi Builder:

Anschließend werden alle Ihre Überschriften auf der gesamten Website anhand Ihrer definierten Clamp () -Werte anpassen.

Wenn Sie nun die H3 -Größe aktualisieren möchten, ändern Sie einfach die Zahlenvariable und sie wird überall aktualisiert, wo Sie sie verwendet haben. ( Möchten Sie Ihr eigenes Typografie -System in Divi 5 erstellen? Hier ist eine vollständige Anleitung zum Verwalten von Schriftarten und Schriftgrößen mithilfe von Clamp () und Designvariablen.)

Dieser Ansatz ermöglicht eine zentralisierte Steuerung und erleichtert die globale Aktualisierung der Typografieeinstellungen, ohne jede Instanz manuell anzupassen. Durch die Anwendung dieser Clamp () -Variablen durch Voreinstellungen der Option Group rationalisieren Sie Ihren Entwurfsprozess.

clamp () kombiniert sich mit Calc ()

Sie können auch die Funktion calc () in clamp () verwenden, um die Skalierung Ihrer Werte zu fäuigen. Dies ist besonders nützlich, wenn Sie eine Basisgröße hinzufügen und sie dann genauer mit einer relativen Einheit wie VW skalieren möchten.

Zum Beispiel die Schriftgröße: Clamp (1REM, CALC (0,75REM + 2VW), 2,5REM) verwendet Calc (), um eine stabile Basis (0,75REM) hinzuzufügen und sie dann weiter mit 2 VW zu skalieren.

Auf diese Weise kann die Schrift basierend auf der Ansichtsfensterbreite skaliert werden, bietet jedoch auch einen Vorsprung mit einer Basis -Schriftgröße. Dies ist nützlich, um die Lesbarkeit auf kleineren Bildschirmen aufrechtzuerhalten, ohne mehrere Klemmvariationen zu benötigen. Der Calc () -Trick in clamp () ist perfekt für überall, wo Sie diese zusätzliche Kontrolle haben möchten, wie die Dinge skalieren.

Praktische Anwendungsfälle von Clamp ()

Schauen wir uns nun einige übliche Anwendungsfälle von Clamp () an und wie einfach es wird, wenn Sie sie mit Divi 5 anwenden:

1. Konsequente Überschriftengrößen auf allen Geräten auf

Responsive Typografie ist der beste Anwendungsfall von Clamp (). Da wir bereits unsere Größen (H1-H6) mit Clamp () in Designvariablen definiert hatten, ist es Zeit, sie in Aktion zu sehen.

Wir haben diese Seite mit H5S für Menüelemente erstellt. Anschließend haben wir die H5 -Zahlenvariable auf jeden der Heading -Textgrößen des H5 angewendet. Und wie Sie sehen können, skaliert jede Überschrift flüssig über Haltepunkte.

Der Text bleibt klar, ausgewogen und visuell konsistent über alle unsere definierten Reaktionsgrüßpunkte.

Sie können auch Clamp () für die Höhe und den Buchstabenabstand verwenden. Es hilft, eine optimale Lesbarkeit aufrechtzuerhalten, indem die Lücken oder den Abstand leicht zunehmen, wenn der Bildschirm breiter wird. Eine kleine Veränderung, aber es würde sich längere Inhalte als atmungsfähiger anfühlen.

2. Setzen Sie Clamp () Breite für Abschnitte auf große Bildschirme

Absätze sind von Natur aus einfach auf Mobilgeräten zu lesen, da kurze Linien in kompakten Bildschirmen inhalts verdaulich machen. Bei ultra-weiten Monitoren werden die Leser jedoch gezwungen sein, ganze horizontale Zeilen zu scannen, wenn ein Abschnitt mit voller Breite den Text zu weit dehnt. Es fühlt sich an, als würde man eine Werbetafel lesen. Die ideale Zeilenlänge eines Satzes beträgt etwa 50–75 Zeichen. Wenn Ihre Website also einen endlosen Satz auf einem Breitbildschirm anzeigt, verlieren Sie möglicherweise das Interesse des Lesers.

Um dies zu beheben, setzen Sie eine reaktionsschnelle Breite wie Clamp (300px, 65 VW, 800px), um Ihren Absatz auf eine feste Breite (800px) zu skalieren, sodass Absätze auch auf breiteren Bildschirmen lesbar erscheinen.

Dies ist eine perfekte Möglichkeit, Ihre Blog -Beiträge auf breiteren Bildschirmen lesbar zu machen.

3.. Setzen Sie Clamp () Breite für einzelne oder vorgestellte Bilder

In ähnlicher Weise können einzelne Bilder (wie vorgestellte Bilder) auf ultra-weiten Bildschirmen viel zu groß erscheinen. Es sieht auf einem Tablet perfekt aus, kann sich aber auf einem 4K -Monitor unbeholfen erstrecken, was sich im Vergleich zum Rest des Inhalts überwältigend anfühlen kann.

Um dies zu beheben, verwenden Sie eine basierte Bildbreite wie Clamp (300px, 60 VW, 1000px). Es stellt sicher, dass das Bild mit der Bildschirmgröße fließend wächst, stoppt jedoch, bevor es das Layout dominiert.

Oder Sie können einfach eine clamp () Breite für die gesamte Containerreihe festlegen, um sicherzustellen, dass alle Elemente (Bild, Überschrift und Text) einheitlich sicherstellen.

4. Fügen Sie Fluidpolster und Rand mit Clamp hinzu ()

Designer erhalten oft den Abstand für Desktop, aber es funktioniert nicht immer gut auf kleineren oder sehr großen Bildschirmen. Feste Polsterung und Ränder passen sich nicht immer mit der Bildschirmgröße an. Hier wird Clamp () nützlich.

Zum Beispiel erstellen ein Klemme (0,5REM, 2VW, 2REM) und eine Klemme (1REM, 3VW, 4REM) in einer Bildergalerie Räume, die klein und skalieren mit dem Bildschirm.

Es gibt Ihrem Layout -Raum, um große Bildschirme zu atmen und die Dinge auf dem Handy fest zu halten:

Clamp () hilft auch dabei, die Polsterung reibungslos um Kartenlayouts, Bildgalerien, Abschnittsbehälter und Textblöcke zu skalieren, insbesondere wenn Sie einen absichtlichen Abstand ohne ständigen Bruchpoint -Optimierungen wünschen.

5. Erstellen Sie reaktionsschnelle Heldenabschnitte, die nahtlos skalieren

Mit Clamp () können Sie auf jedem Bildschirm die Heldenabschnitte perfekt aussehen lassen, indem Sie die Heldenüberschrift, die Knopfpolsterung und den Untertitelabstand definieren. Wir haben diese Clamp () -Werte als Konstruktionsvariablen gespeichert, um ihre Anwendung zu vereinfachen. (Sie möchten jedoch Ihren variablen Manager nicht ausfüllen, indem Sie jedes Minute -Detail speichern.)

Das Anwenden dieser Werte ist jetzt einfach.

Sobald Sie gespeichert sind, passt sich jeder automatisch an die Bildschirmgröße an, um Ihrem Heldenbereich den perfekten ersten Eindruck auf jedem Gerät zu vermitteln.

Design-Pixel-Perfekt-Layouts mit Clamp (), ohne eine einzelne Codezeile zu schreiben

Clamp () hilft Ihnen, flüssige, reaktionsschnelle Layouts zu entwerfen, ohne sich auf endlose Medienfragen zu verlassen. Und mit Divi 5 müssen Sie keine einzige Codezeile schreiben, um ihn zu verwenden. Unabhängig davon, ob Sie das Codieren bevorzugen oder visuelles Design genießen, die fortgeschrittenen Einheiten von Divi erleichtern die Anwendung von Klemmen () auf Schriftarten und Abstand.

Möchten Sie mit leistungsstarken Funktionen wie Clamp () so leicht zugänglich sind, dass Sie Divi 5 nicht selbst ausprobieren möchten? Testen Sie verschiedene Werte, erstellen Sie Ihr eigenes reaktionsschnelles System und sehen Sie, wie flexibel Ihre Layouts werden können. Und wenn Sie einen Lieblings -Clamp () -Trick haben, teilen Sie ihn in den Kommentaren unten mit! Wir würden gerne sehen, was Sie schaffen.