Beginnen wir mit den Grundlagen.
In CSS können Sie Elementgrößen oder -längen mit verschiedenen Maßeinheiten angeben. Die Maßeinheiten, die Sie in einigen Elementor-Optionen finden, umfassen PX, EM, REM, %, VW und VH, obwohl in CSS noch einige mehr verfügbar sind. Nicht alle Elementor-Elemente bieten alle diese Einheiten. Elementor präsentiert nur die Optionen, die für das jeweilige Element am sinnvollsten sind.
Das Wichtigste, was Sie über die verschiedenen Einheiten lernen müssen, ist, dass einige Einheiten, wie z. B. PX, absolute Einheiten und andere relative Einheiten sind.
Absolute Einheiten
PX: Pixel (px) gelten als absolute Einheiten, obwohl sie sich auf DPI und Auflösung des Anzeigegeräts beziehen. Aber im Gerät selbst ist die PX-Einheit fest und ändert sich nicht aufgrund anderer Elemente. Die Verwendung von PX kann für responsive Websites problematisch sein, ist jedoch nützlich, um eine konsistente Größe für einige Elemente beizubehalten. Wenn Sie Elemente haben, deren Größe nicht geändert werden sollte, ist die Verwendung von PX eine gute Option.
Relative Einheiten
EM: Relativ zum übergeordneten Element
schnelle Augenbewegung: Relativ zum Stammelement (HTML-Tag)
%: Relativ zum übergeordneten Element
Vw: Relativ zur Breite des Ansichtsfensters
VH: Relativ zur Höhe des Ansichtsfensters
Im Gegensatz zu PX eignen sich relative Laufwerke wie %, EM und REM besser für das reaktionsschnelle Design und helfen auch Zugänglichkeitsstandards einhalten. Relative Einheiten lassen sich auf verschiedenen Geräten besser skalieren, da sie entsprechend der Größe eines anderen Elements nach oben und unten skaliert werden können.
Schauen wir uns ein einfaches Beispiel an.
In den meisten Browsern beträgt die Standardschriftgröße 16px. Relative Einheiten berechnen die Größe aus dieser Basis. Wenn Sie diese Basis ändern, indem Sie eine Basisgröße für die HTML-Tag Durch CSS wird dies die Grundlage für die Berechnung der relativen Einheiten auf dem Rest der Seite. Wenn ein Benutzer seine Schriftgröße anpasst, wird dies in ähnlicher Weise die Grundlage für die Berechnung der relativen Einheiten.
Was bedeuten diese Einheiten, wenn es um die Standardeinstellung von 16px geht?
Die von Ihnen angegebene Zahl multipliziert diese Zahl mit der Standardgröße.
1em = 16px (1 * 16)
2em = 32px (2 * 16)
.5em = 8px (.5 * 16)
1rem = 16 px
2rem = 32px
.5rem = 8px
100% = 16 px
200% = 32 px
50% = 8 px
Okay, aber was ist, wenn Sie oder der Benutzer die Standardgröße ändern? Da es sich um relative Einheiten handelt, basieren die endgültigen Größenwerte auf der neuen Basisgröße. Obwohl der Standardwert 16px beträgt, würden die berechneten Größen am Ende lauten, wenn Sie oder der Benutzer ihn auf 14px ändern:
1em = 14px (1 * 14)
2em = 28px (2 · 14)
.5em = 7px (.5 * 14)
1rem = 14px
2rem = 28px
.5rem = 7px
100% = 14 px
200% = 28 px
50% = 7px
Dies gibt dem Benutzer die Freiheit, die Standardschriftgröße seines Browsers anzupassen, während die relative Skalierung jedes von ihm angegebenen Elements beibehalten wird.
Was ist der Unterschied zwischen EM und REM?
Wenn man sich das obige Diagramm ansieht, zeigt es, dass EM und REM genau gleich aussehen. Wie unterscheiden sie sich also?
Einfach ausgedrückt unterscheiden sie sich basierend auf der Vererbung. Wie bereits erwähnt, basiert REM auf dem Root-Element (HTML). Jedes von REM verwendete untergeordnete Element verwendet die Größe des HTML-Stamms als Berechnungspunkt, unabhängig davon, ob für ein übergeordnetes Element unterschiedliche Größen angegeben sind oder nicht.
EM hingegen basiert auf der Schriftgröße des Elternelements. Wenn ein Elternelement eine andere Größe als das Wurzelelement hat, basiert die EM-Berechnung auf dem Elternelement und nicht auf dem Wurzelelement. Dies bedeutet, dass verschachtelte Elemente, die EM zur Bemaßung verwenden, manchmal eine Größe haben, die Sie nicht erwartet haben. Auf der anderen Seite erhalten Sie eine genauere Kontrolle, wenn Sie die Größe eines bestimmten Bereichs einer Seite angeben müssen.
Was ist mit %, VW und VH? Worum geht es ihnen?
Während PX, EM und REM hauptsächlich für die Schriftgröße verwendet werden, werden %, VW und VH hauptsächlich für Ränder, Auffüllungen, Abstände und Breiten / Höhen verwendet.
Um es noch einmal zu wiederholen, VH steht für "Viewport Height", also die Höhe des sichtbaren Bildschirms. 100VH würde 100% der Viewport-Höhe oder der Gesamthöhe des Bildschirms darstellen. Und natürlich steht VW für „Viewport Width“, also die Breite des sichtbaren Bildschirms. 100VW würde den 100% der Ansichtsfensterbreite oder volle Breite vom Bildschirm. % spiegelt einen Prozentsatz der Größe des übergeordneten Elements wider, unabhängig von der Größe des Ansichtsfensters.
Schauen wir uns einige Beispiele an, bei denen Elementor %-, VW- und VH-Optionen anbietet.
Spaltenbreiten: Wenn Sie das Layout einer Elementor-Spalte bearbeiten, werden Sie feststellen, dass nur eine Breiteneinheit verfügbar ist: %. Spaltenbreiten funktionieren nur bei Verwendung von Prozentsätzen gut und reaktionsschnell, daher wird keine andere Option angeboten.
Ränder: Die Ränder eines Abschnitts können in PX oder % angegeben werden. Im Allgemeinen ist es vorzuziehen, % zu verwenden, um sicherzustellen, dass die Ränder nicht größer als der Inhalt sind, z. B. beim Herunterskalieren für ein mobiles Gerät. Durch die Verwendung eines Prozentsatzes der Gerätebreite werden Ihre Ränder relativ zur Größe des Inhalts gehalten, was fast immer vorzuziehen ist.
Ausgestopft: Das Padding eines Abschnitts kann in PX, EM oder % angegeben werden. Wie bei den Rändern ist es oft vorzuziehen, EM o% zu verwenden, damit die Auffüllung bei zunehmender Seitengröße relativ bleibt.
Schriftgröße: Wenn Sie die Schriftart eines Elements bearbeiten, z. B. eine Überschrift, werden vier Optionen angezeigt: PX, EM, REM und VH
Hast du jemals eine Kopfzeile erstellt groß und haben Sie bewundert, wie gut es auf dem Desktop aussah, nur um festzustellen, dass es auf dem Handy zu groß war? (Eingeständnis der Schuld: Ich habe, mehr als einmal).
Der Schlüssel zur Lösung dieses Problems besteht darin, EM, REM oder VW anstelle von PX zu verwenden. Was Sie wählen, hängt von Ihrer speziellen Situation ab. Normalerweise wähle ich EM, weil ich möchte, dass die Größe relativ zum übergeordneten Element des Headers ist. Wenn Sie es jedoch vorziehen, dass die Größe relativ zur Größe des Stammverzeichnisses (HTML) ist, wählen Sie stattdessen REM. Oder Sie können es relativ zur Ansichtsfensterbreite (VW) einstellen, wenn dies für Sie am besten funktioniert.
Beachten Sie, dass Sie auch gerätespezifische PX-Werte für die Schriftgröße festlegen können, indem Sie die Gerätesymbole verwenden, um eine Größe für Desktop, Tablet und Mobilgerät anzugeben. Dies setzt jedoch der Reaktionsfähigkeit und Zugänglichkeit immer noch Grenzen. Denken Sie also daran, wenn Sie sich für PX entscheiden.
Mehr zu VW und VH
Ansichtsfenstereinheiten stellen einen Prozentsatz des aktuellen Browserfensters (aktuelle Browsergröße) dar. Obwohl es Prozenteinheiten ähnlich ist, gibt es einen Unterschied. Viewport-Einheiten werden als Prozentsatz der aktuellen Browser-Viewport-Größe berechnet. Andererseits werden prozentuale Einheiten als Prozentsatz des übergeordneten Elements berechnet, das sich von der Größe des Ansichtsfensters unterscheiden kann.
Betrachten wir ein Beispiel für ein Ansichtsfenster mit 480 x 800 Pixel.
1 VW = 1% der Ansichtsfensterbreite (oder 4,8 px)
50 VW = 50% der Ansichtsfensterbreite (oder 240 px)
1 VH = 1% der Ansichtsfensterhöhe (oder 8px)
50 VH = 50% der Ansichtsfensterhöhe (oder 400 px)
Wenn sich die Größe des Ansichtsfensters ändert, ändert sich auch die Größe des Elements.
Wann sollten Sie eine Einheit über eine andere verwenden?
Letztlich gibt es keine perfekte Antwort auf diese Frage. Im Allgemeinen ist es oft besser, eine der relativen Einheiten anstelle von PX zu wählen, damit Ihre Seite Website hat die beste Möglichkeit, ein Design darzustellen schön ansprechbar. Wählen PX Sie müssen jedoch sicherstellen, dass die Größe eines Elements an keinem Haltepunkt geändert wird und gleich bleibt, unabhängig davon, ob ein Benutzer eine andere Standardgröße ausgewählt hat. PX-Einheiten garantieren konsistente Ergebnisse, auch wenn dies nicht ideal ist.
EM Es ist relativ zur Schriftgröße des übergeordneten Elements. Wenn Sie also die Größe des Elements basierend auf der Größe des übergeordneten Elements skalieren möchten, verwenden Sie EM.
schnelle Augenbewegung ist relativ zur Stammschriftgröße (HTML). Wenn Sie also die Elementgröße basierend auf der Stammgröße skalieren möchten, verwenden Sie REM unabhängig von der Größe des übergeordneten Elements. Wenn Sie EM verwendet haben und aufgrund vieler verschachtelter Elemente auf Größenprobleme stoßen, ist REM wahrscheinlich die beste Option.
Vw ist nützlich zum Erstellen von Elementen von Gesamtbreite (100%), die die gesamte Breite des Ansichtsfensters ausfüllen. Natürlich können Sie einen beliebigen Prozentsatz der Breite des Ansichtsfensters verwenden, um andere Ziele zu erreichen, z. B. 50% für die halbe Breite usw.
VH Dies ist nützlich, um Elemente voller Höhe (100%) zu erstellen, die die volle Höhe des Ansichtsfensters ausfüllen. Natürlich können Sie einen beliebigen Prozentsatz der Viewport-Höhe verwenden, um andere Ziele zu erreichen, z. B. den 50% für die halbe Höhe usw.
% es ist VW und VH ähnlich, aber es ist keine Länge im Verhältnis zur Breite oder Höhe des Ansichtsfensters. Stattdessen ist es ein Prozentsatz der Breite oder Höhe des übergeordneten Elements. Prozenteinheiten sind oft nützlich, um beispielsweise die Breite von Rändern einzustellen.
Elementor macht es Ihnen leicht, die Option auszuwählen, die am besten zu Ihrem Design passt. Letztendlich ist es Ihre Wahl.
