CSS -Einheiten verstehen (und wie man sie benutzt)

Sie haben wahrscheinlich schon einmal verschiedene CSS -Einheiten im Webcode gesehen, aber wenn Sie verstehen, wie sie funktionieren, können Sie sie absichtlich mehr verwenden. In diesem Beitrag erfahren Sie, welche CSS -Einheiten wirklich sind, wie sie sich auf Ihre Layouts auswirken und wie Sie in Divi 5 die Verwendung von Divi 5 reaktionsfähiger entwerfen können.

Divi 5 bringt native Unterstützung für CSS -Einheiten direkt in den Bauunternehmer. Dank der neuen Funktion für erweiterte Einheiten können Sie %, EM, REM, VW und mehr ohne benutzerdefinierten Code verwenden.

Was sind CSS -Einheiten?

CSS -Einheiten sagen dem Browser, wie groß oder klein etwas sein sollte. Egal, ob Sie die Größe einer Überschrift, die Breite eines Abschnitts oder den Abstand zwischen Elementen festlegen, Sie verwenden Einheiten, um diesen Raum zu definieren. Ohne sie hat der Browser keine Ahnung, was mit Ihren Werten zu tun ist.

Zum Beispiel bedeutet das Schreiben von Breite: 100 bedeutet für den Browser nichts. Aber fügen Sie ein Gerät wie 100px oder 100%hinzu, und jetzt weiß es genau, was Sie wollen.

Nehmen Sie dieses Beispiel mit vier Feldern, die jeweils einen anderen CSS -Wert verwenden:

• Der erste verwendet Breite: 100. Technisch ungültig, aber viele Browser werden sie als 100%rendern.
• Der zweite (100px) verwendet eine feste Breite.
• Die dritte und vierte Skala (100% und 60%) im Vergleich zum Elternbehälter.

Sie fragen sich vielleicht, warum die erste Box mit Breite: 100 noch in voller Breite erscheint, obwohl sie technisch ungültig ist.

Breite: 100 wird vom Browser ignoriert, weil es eine Einheit fehlt. Aber in diesem Fall erstreckt sich die Box immer noch über den Container, nicht weil das CSS akzeptiert wurde, sondern weil Blockebene wie Division auf natürliche Weise die volle Breite ihres übergeordneten übereinstimmenden Ebenen umfassen. Es handelt sich um ein Zufall des Standardverhaltens, nicht auf das Ergebnis der ungültigen CSS, die als 100%interpretiert wird.

Beliebte CSS -Einheiten

Obwohl PX und % häufig auftreten, sind viele andere genauso nützlich, wenn Sie wissen, wann Sie sie verwenden müssen:

Sie werden diese Einheiten überall im Webdesign sehen, die Schriftgrößen festlegen, die Abschnittsbreiten definieren, Polsterung und Ränder anpassen und flexible Netzlayouts erstellen. Sie sind einer der wichtigsten entscheidenden Faktoren, wie Ihr Layout aussieht und sich verhält. Und wo Sie verwenden, welche Einheiten für effektives Design stärker von Bedeutung sind, werden wir in Kürze zu diesem Zeitpunkt kommen.

Aber zuerst ist es hilfreich zu wissen, dass alle CSS -Einheiten in zwei Haupttypen fallen: absolut und relativ.

Absolute und relative Einheiten

Das Verständnis des Unterschieds ist unerlässlich, wenn Ihr Layout in verschiedenen Bildschirmgrößen gut funktioniert.

Absolute Einheiten

Absolute Einheiten haben feste Werte. Dies bedeutet, dass beim Einstellen von etwas auf 100px immer 100 Pixel breit sind, unabhängig davon, ob sich der Benutzer auf einem Telefon, einem Tablet oder einem massiven Desktop -Monitor befindet. Diese Einheiten reagieren nicht auf die Bildschirmgröße oder das umgebende Layout, was sie großartig macht, wenn Sie eine genaue Kontrolle benötigen.

Sie werden häufig für Grenzen, Symbolgrößen oder feste Boxschatten verwendet, in der es normalerweise mehr als Flexibilität wichtig ist.

Die gleiche Präzision kann jedoch Probleme verursachen. Ein Design, das auf einem großen Bildschirm perfekt aussieht, kann überlaufen, unbeholfen schrumpfen oder auf kleinere Geräte vollständig brechen. Da sich absolute Einheiten nicht anpassen, können sie Ihr Layout starr anfühlen, es sei denn, sie werden sorgfältig verwendet.

Relative Einheiten

Wie der Name schon sagt, passen diese basierend auf ihrer Umgebung an. Anstatt auf eine bestimmte Größe gesperrt zu bleiben, skalieren sie je nach Kontext (übergeordnetes Element, Ansichtsfenster usw.). Dies macht sie viel flexibler für reaktionsschnelles Design.

Einige Einheiten reagieren auf die Größe des übergeordneten Elements, andere auf die Root -Schriftgröße der Seite und andere sogar auf das Browserfenster selbst. Hier sind ein paar wichtige:

• % Skalen mit dem Elternbehälter.
• EM passt basierend auf der Schriftgröße des übergeordneten Elements ein.
• REM folgt der Root -Schriftgröße der Seite.
• VW und VH reagieren auf die Breite und Höhe des Browser -Ansichtsfensters.

Da sie sich an verschiedene Umgebungen anpassen, helfen Ihnen diese Einheiten, Layouts aufzubauen, die sich auf jedem Bildschirm natürlich anfühlen. Sie erweitern oder schrumpfen mit dem Platz, den sie gegeben haben, wodurch Ihre Inhalte lesbar und Ihr Design über Geräte hinweg ausgeglichen werden.

Schauen wir uns ein kurzes Beispiel an, um zu sehen, warum diese Flexibilität von Bedeutung ist. Nehmen wir an, Sie erstellen einen Bildabschnitt und setzen seine Breite auf 1200 PX.

Das mag auf einem großen Monitor perfekt aussehen, aber auf einem Tablet mit einer Bildschirmbreite von 768 Pixel könnte das Bild überlaufen und seltsam aussehen. Versuchen Sie nun verwenden:

width: 100%;

Dies sagt dem Browser, dass das Bild die Breite seines Behälters füllt. Unabhängig davon, ob der Bildschirm breit oder eng ist, passt das Bild automatisch an.

Der eigentliche Vorteil der Verwendung einer relativen Einheit ist die Reaktionsfähigkeit. Sie weisen nicht nur eine Größe zu, sondern geben dem Browser klare Anweisungen, wie sich Ihr Layout in verschiedenen Szenarien verhalten sollte. Und wenn Sie es richtig machen, passt Ihr Inhalt auf jeden Bildschirm.

Durch die Verwendung von relativen Einheiten, in denen sie sinnvoll sind, vermeiden Sie starre Layouts, verringern die Notwendigkeit von Haltepunkten und halten Ihr Design leichter zu verwalten. Und mit Divi müssen Sie keine einzige Codezeile schreiben, um verschiedene CSS -Einheiten zu verwenden. Wählen Sie das gewünschte Gerät im Baumeister aus und sehen Sie, wie Ihr Layout in Echtzeit reagiert.

Wann zu verwenden, welche CSS -Einheit

Nachdem Sie den Unterschied zwischen absoluten und relativen Einheiten verstehen, besteht der nächste Schritt darin, zu wissen, wann sie jeweils verwendet werden sollen.

Gehen Sie in der Regel mit relativen Einheiten, wenn sich Ihr Layout an verschiedene Bildschirmgrößen anpassen muss. Diese eignen sich perfekt für Abschnittsbreiten, Typografie, Abstand zwischen Elementen oder ganzseitige Layouts. Da sie automatisch skalieren, helfen sie Ihnen, die Konsistenz aufrechtzuerhalten, ohne separate Stile für jedes Gerät zu erstellen.

Auf der anderen Seite sind absolute Einheiten hilfreich, wenn Sie möchten, dass etwas unabhängig von der Bildschirmgröße gleich bleibt. Denken Sie an Grenzen, Symbole, festen Abstand oder kleine visuelle Details.

Hier sind einige Beispiele, die Ihre Auswahlmöglichkeiten leiten:

• Verwenden Sie PX, wenn Sie eine genaue Steuerung benötigen, z. B. für Symbolgrößen. Da es sich nicht anpasst, vermeiden Sie es für Layoutbreiten oder Text.
• Verwenden Sie %, wenn Elemente mit ihrem Container skaliert werden sollen.
• Verwenden Sie EM, wenn Sie den Abstand mit der Schriftgröße des übergeordneten Elements skalieren möchten.
• Verwenden Sie REM (allgemein als Root EM bezeichnet) , wenn Sie eine konsistente Größe auf Ihrer Website wünschen. Da es auf der Root -Schriftgröße basiert, bleibt der Abstand und die Typografie vorhersehbar.
• Verwenden Sie VW und VH für Vollbildabschnitte, Heldenbereiche oder Abstand, die direkt auf das Ansichtsfenster reagieren (die gesamte Ansicht Ihres Gerätebildschirms).

Für fortgeschrittene Steuerung können Sie auch Einheiten mit CSS -Funktionen kombinieren. Calc () ist praktisch, wenn Sie Werte wie 1REM + 5VW für den reaktionsschnellen Abstand mit einer minimalen Basis mischen. Und clamp () ist ideal, um Flüssigkeitswerte zu setzen, die zwischen den Grenzen wachsen oder schrumpfen, wodurch es zu einer saubereren Alternative zu Medienfragen wird.

Die Auswahl der richtigen Einheit beinhaltet am Ende, wie sich jedes Element in verschiedenen Szenarien verhalten und das Gerät auswählen sollte, das dies am besten erreicht.

Divis fortgeschrittene Einheiten, um reaktionsmäßig ohne Codierung zu bauen

Wir haben bereits gesehen, wie CSS -Einheiten Ihnen die Kontrolle über das Layoutverhalten geben. Divi 5 übernimmt diese Kontrolle und macht es mühelos, mit fortgeschrittenen Einheiten zu verwenden.

Abonnieren Sie unseren YouTube -Kanal

Mit der nativen Unterstützung für %, EM, REM, VW und VH, die direkt in den Bauherrn aufgebaut sind, können Sie echte CSS -Werte auf Module, Abschnitte, Abstand und Typografie anwenden, ohne ein Codepanel zu öffnen. Wählen Sie in jedem numerischen Bereich einfach Ihre bevorzugte Einheit aus dem Dropdown Advanced Unit aus, passen Sie den Wert an und sehen Sie die Änderungen live an.

Und es hört hier nicht auf. Mit DIVI können Sie auch erweiterte CSS -Funktionen wie Calc () und Clamp () im visuellen Bauunternehmer verwenden. Das heißt, Sie können Flüssigkeitswerte erstellen, Einheiten und Feinabstimmungslayouts mischen, wobei der gleiche Maß an Präzisionsentwicklern von handgeschriebenen CSS, jedoch visuell, erhältlich ist.

Benötigen Sie eine Schriftgröße, die fließend über verschiedene Bildschirmgrößen skaliert wird? Verwenden Sie Clamp (). Möchten Sie den Abstand mit einer Mischung aus festen und flexiblen Werten ausgleichen? Versuchen Sie Calc (). Divi kümmert sich sofort und sichtbar mit allem.

Sie erraten oder wechseln nicht mehr zwischen Design und Code. DIVI gibt Ihnen die visuelle Leistung und das sofortige Feedback, um die reaktionsschnelle Logik mit vollständiger Kontrolle darüber zu erhalten, wie Ihre Elemente über Geräte skalieren und sich verhalten.

Erfahren Sie alles über die fortgeschrittenen Einheiten von Divi 5

CSS -Einheiten synchronisieren perfekt mit Divis fortschrittlichen Workflows

Sie haben bereits gesehen, wie Divi die Verwendung einzelner CSS -Einheiten direkt im Bauunternehmer einfach macht. Aber die wahre Stärke zeigt, wenn diese Einheiten über Ihre gesamte Website zusammenarbeiten. Hier finden Sie Funktionen wie Designvariablen, Voreinstellungen für Optionengruppen und erweiterte CSS -Funktionen wie Calc () und Clamp () Glanz.

Divi lässt Sie nicht nur CSS -Einheiten in Felder eingeben. Es hilft Ihnen, sie in Ihr gesamtes Designsystem zu integrieren, ohne Code zu schreiben. Alles bleibt konsequent, skalierbar und leichter aufrechtzuerhalten.

Lassen Sie uns sehen, wie Divi Ihnen dabei hilft, CSS-Einheiten als Teil eines flexiblen, logikgesteuerten Workflows zu verwenden:

1. Erstellen Sie Layoutlogik mit Designvariablen

Eine der einfachsten Möglichkeiten, Zeit für jedes Projekt zu sparen, besteht darin, Ihre Layout -Logik im Voraus zu planen. Anstatt den gleichen Abstand oder die gleiche Schriftgröße an mehreren Stellen anzupassen, definieren Sie diese Werte einmal und verwenden sie über Ihr gesamtes Design mit Divi -Designvariablen.

Sie können wiederverwendbare Werte wie –kard-padding oder -abschnittsklappe erstellen, indem Sie reale CSS-Einheiten wie 2REM, 5VW oder sogar Formeln wie Calc (2REM + 1VW) verwenden. Sobald diese Werte festgelegt sind, können diese Werte auf Module, Zeilen und Abschnitte angewendet werden, um alles konsistent zu halten.

Sie müssen die Variable nur aktualisieren, wenn Sie sie später ändern möchten. Die Veränderung spiegelt überall überall wider, wo sie verwendet wird, und speichert Ihnen das Hin und Her, einzelne Einstellungen zu jagen. Und weil CSS -Einheiten direkt in das System von Divi aufgebaut sind, verlassen Sie sich nicht auf Vermutungen, sondern wenden Sie sich visuell auf die echte CSS -Logik an. Dadurch wird Ihr Layout überschaubarer, skalierbarer und leichter anpassen, wenn Ihr Projekt wächst.

2. Verwenden Sie visuell Clamp () und Calc ()

CSS -Funktionen wie Clamp () und Calc () helfen Ihnen, reaktionsschnelle Layouts zu erstellen. Sie können flexible Werte definieren, die sich über Bildschirmgrößen anpassen, ohne Medienabfragen zu schreiben. Anstatt für jedes Gerät feste Größen festzulegen, können Sie Logik wie Clamp (1REM, 2VW, 2,5REM) schreiben, um die Browser -Skalierung zwischen den festgelegten Grenzen reibungslos zu ermöglichen. Oder verwenden Sie Calc (100VH - 80px), um einen Heldenabschnitt basierend auf Ihrer Ansichtsfensterhöhe anzupassen.

Normalerweise müssen sie manuell CSS schreiben. In Divi können Sie diese direkt in ein beliebiges Feld eingeben.

Und da CSS -Einheiten in beiden Funktionen unterstützt werden, können Sie Werte wie REM, VW und PX mischen, um genau das gewünschte Verhalten zu erhalten. Sie sehen die Ergebnisse live, während Sie tippen, was es einfach macht, zu experimentieren und die Reaktionsfähigkeit richtig zu machen, ohne den Bauunternehmer zu verlassen.

3. Speichern Sie die Einheitslogik mit Optionsgruppenvoreinstellungen

Sobald Sie Layouts mit fortgeschrittenen Einheiten oder Formeln eingerichtet haben, müssen Sie sie nicht wieder aufbauen. Mit Divi können Sie Ihre Styling -Logik, einschließlich der Polsterung: Clamp (1REM, 3VW, 2REM), als Option Group Preset speichern.

Das heißt, wenn Sie das nächste Mal denselben Abstand oder Layout -Muster benötigen, wenden Sie nicht dieselben Einstellungen an, sondern nur das gespeicherte Voreinsatz.

Und wenn Sie Designvariablen in Voreinstellungen verwenden, ist dies sogar noch besser. Sie können problemlos ein miteinander verbundenes System erstellen, in dem die Änderung der Stile Ihrer gesamten Website nur von einer Sache abhängt: Ändern der Variablen.

In Divi geht es bei der Verwendung einer CSS -Einheit nicht nur um Größe. Es geht um Verhalten. Jeder von Ihnen festgelegte Wert wird Teil eines visuellen Systems, das über Ihr Layout anpasst, skaliert und bleibt. Und weil es alles in den Bauunternehmer integriert ist, fühlt es sich weniger wie eine Codierung und eher wie das Entwerfen mit Logik an.

Divi verwandelt CSS -Einheiten in eine visuelle Supermacht

Sie müssen keine CSS schreiben, um CSS -Einheiten zu verwenden. Divi 5 bringt sie alle in eine visuelle Schnittstelle, an der Sie in Echtzeit erkunden, anwenden und vorschau werden können. Unabhängig davon, ob Sie den Abstand einstellen, Flüssigkeitsartografie erstellen oder Layout -Logik mit Variablen und Voreinstellungen erstellen, können Sie alles visuell tun.

Bereit, es zu versuchen? Laden Sie Divi 5 herunter und verwenden Sie echte CSS -Einheiten in Ihren Designs.