Schritt-für-Schritt-Video
Grundstruktur eines HTML-Dokuments
Wie Carl Sagan sagte: „Wenn Sie einen Apfelkuchen von Grund auf neu backen wollen, müssen Sie zuerst das Universum erfinden“. Und ja, um relative Einheiten in Elementor zu verstehen, was ein Elternelement oder der Root-Container ist usw., müssen wir zuerst wissen, wie eine Webseite in der HTML-Sprache grundlegend strukturiert ist.
Hier sehen wir die Mindeststruktur eines HTML-Dokuments (Hypertext Markup Language). Die HTML-Sprache besteht aus Tags, die durch die Zeichen kleiner als < und größer als > begrenzt werden: Beispiel <html>, mit Ausnahmen wie dem ersten Tag <!DOCTYPE html> , das absolut ist, haben alle Tags eine Öffnung und Schließung, Beispiel <h1>Überschrift </h1>; der Abschluss unterscheidet sich dadurch, dass die Öffnung des Tags </ enthält, also zusätzlich zum „Kleiner-als-Zeichen“ den Schrägstrich, auch Slash / genannt.
- Die erste Zeile des Beispiels ist ein absolutes Element (es hat kein schließendes Tag); es ist eine Dokumenttyp-Deklaration (auch DOCTYPE-Deklaration genannt), die dieses Dokument als HTML5-Dokument identifiziert und modernen Browsern ermöglicht zu wissen, dass sie das Dokument gemäß der HTML5-Spezifikation interpretieren sollen.
- Das gesamte Dokument ist in einem html enthalten. Das html wird als Root-Element bezeichnet, weil es alle Elemente des Dokuments enthält und in keinem anderen Element enthalten sein kann.
- Innerhalb von html unterteilt sich das Dokument in einen Kopfbereich (head) und einen Körper (body). Der head enthält beschreibende Informationen über das Dokument selbst, wie seinen Titel, die verwendeten Stylesheets, Skripte und andere Arten von „Meta“-Informationen.
- Der body ist der Körper der Seite, das Element enthält alles, was wir im Browserfenster anzeigen möchten.
- Die meta-Elemente innerhalb des head-Tags liefern Informationen über das Dokument selbst. Ein meta-Element kann verwendet werden, um alle Arten von Informationen bereitzustellen, aber in diesem Beispiel wird die Zeichenkodierung (die standardisierte Sammlung von Buchstaben, Zahlen und Symbolen) angegeben, die im Dokument verwendet wird.
- Innerhalb des head befindet sich auch das obligatorische title-Tag. Gemäß der HTML-Spezifikation muss jedes Dokument einen beschreibenden Titel enthalten. Dieser Titel wird im Browser-Tab angezeigt und von Google in der Suchliste als Titel dieser Seite angezeigt.
- Innerhalb des body-Blocks können wir so viele Abschnitte erstellen, wie wir möchten, das div-Tag. Dieses Tag ermöglicht es, mehrere Blockelemente (Absätze, Überschriften, Listen usw.) zu gruppieren. Diese Abschnitte sind Container.
- Dies ist ein weiterer Abschnitt, genau wie der vorherige.
Wie Sie in der Abbildung sehen können, sind all diese Tags wie eine Art Container, die Wurzel oder das Hauptelement ist das html-Tag, das alle anderen enthält, innerhalb von html haben wir den body, und wiederum innerhalb des body haben wir andere div. Wir können also sagen, dass das Root-Element html ist, body ist ein Kind von html und die div sind Kinder von body.
Maßeinheiten von Elementor
Beim Gestalten mit Elementor können Sie sehen, dass einige Elemente Größenoptionen haben, mit denen Sie PX, EM, REM, %, VW oder VH wählen können. Aber was bedeuten diese Maßeinheiten wirklich und wann sollten Sie die eine oder andere verwenden?
Beginnen wir mit den Grundlagen: In CSS können Sie Größen oder Längen von Elementen mit verschiedenen Maßeinheiten angeben. Die Maßeinheiten, die Sie in einigen Optionen der Elementor-Widgets finden, umfassen PX, EM, REM, %, VW und VH, obwohl in CSS mehrere weitere verfügbar sind. Nicht alle Elementor-Elemente bieten alle diese Einheiten an. Elementor präsentiert nur die Optionen, die für das jeweilige Element am sinnvollsten sind.
Der wichtigste Aspekt beim Erlernen der verschiedenen Einheiten ist, dass einige Einheiten wie PX absolute Einheiten sind und andere relative Einheiten.
Absolute Einheiten
PX: Pixel (px) gelten als absolute Einheiten, obwohl sie relativ zum DPI und zur Auflösung des Anzeigegeräts sind. Aber auf dem Gerät selbst ist die PX-Einheit fest und ändert sich nicht basierend auf einem anderen Element. Die Verwendung von PX kann für responsive Websites problematisch sein, ist aber nützlich, um eine konsistente Größe für einige Elemente beizubehalten. Wenn Sie Elemente haben, deren Größe nicht geändert werden soll, ist die Verwendung von PX eine gute Wahl.
Relative Einheiten
- EM: relativ zum Elternelement
- REM: relativ zum Root-Element (HTML-Tag und standardmäßig die im Browser konfigurierte Größe)
- %: relativ zum Elternelement
- VW: relativ zur Breite des Viewports
- VH: relativ zur Höhe des Viewports
Im Gegensatz zu PX passen sich relative Einheiten wie %, EM und REM besser an responsives Design an und helfen auch, Barrierefreiheitsstandards zu erfüllen. Relative Einheiten skalieren besser auf verschiedenen Geräten, da sie basierend auf der Größe eines anderen Elements nach oben und unten skalieren können.
Schauen wir uns ein einfaches Beispiel an: In den meisten Browsern beträgt die Standard-Schriftgröße 16 px. Relative Einheiten berechnen die Größe aus dieser Basis. Wenn Sie diese Basis ändern, indem Sie eine Basisgröße für das HTML-Tag über CSS festlegen, wird dies zur Basis für die Berechnung der relativen Einheiten auf dem Rest der Seite. Ebenso wird, wenn ein Benutzer seine Schriftgröße anpasst, dies zur Basis für die Berechnung der relativen Einheiten.
Was bedeuten also diese Einheiten beim Standardwert von 16 px?
Die von Ihnen angegebene Zahl multipliziert diese Zahl mit der Standardgröße.
1 em = 16 px (1 * 16)
2 em = 32 px (2 * 16)
0,5 em = 8 px (0,5 * 16)
1 rem = 16 px
2 rem = 32 px
0,5 rem = 8 px
100 % = 16 px
200 % = 32 px
50 % = 8 px
Gut, großartig, aber was passiert, wenn der Benutzer die Standardgröße in seinem Browser ändert? Da es sich um relative Einheiten handelt, basieren die endgültigen Größenwerte auf der neuen Basisgröße. Obwohl der Browser-Standard normalerweise 16 px beträgt, würden die berechneten Größen, wenn der Benutzer ihn auf 14 px ändern würde, wie folgt aussehen:
1 em = 14 px (1 * 14)
2 em = 28 px (2 * 14)
0,5 em = 7 px (0,5 * 14)
1 rem = 14 px
2 rem = 28 px
0,5 rem = 7 px
100 % = 14 px
200 % = 28 px
50 % = 7 px
Dies gibt dem Benutzer die Freiheit, die Standard-Schriftgröße seines Browsers anzupassen, während die relative Skalierung jedes von Ihnen angegebenen Elements beibehalten wird.
Was ist der Unterschied zwischen EM und REM?
Wenn man sich die obige Grafik ansieht, zeigt sie EM und REM mit genau demselben Aussehen. Worin unterscheiden sie sich also?
Kurz gesagt, sie unterscheiden sich in der Vererbung. Wie erwähnt, basiert REM auf dem Root-Element (HTML) und standardmäßig, wenn es nicht festgelegt ist, auf dem Browser des Benutzers, der standardmäßig auf 16 px eingestellt ist. Jedes untergeordnete Element, das REM verwendet, verwendet die Größe des HTML-Roots als Berechnungspunkt, unabhängig davon, ob ein Elternelement unterschiedliche Größen angegeben hat oder nicht.
EM hingegen basiert auf der Schriftgröße des Elternelements. Wenn ein Elternelement eine andere Größe als das Root-Element hat, basiert die Berechnung von EM auf dem Elternelement und nicht auf dem Root-Element. Dies bedeutet, dass verschachtelte Elemente, die EM zur Dimensionierung verwenden, manchmal eine Größe haben können, die Sie nicht erwartet haben. Andererseits gibt es Ihnen eine detailliertere Kontrolle, wenn Sie diese benötigen, um die Größe eines bestimmten Bereichs einer Seite anzugeben.
Was ist also mit %, VW und VH? Worum geht es dabei?
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, Abstände, Spacing und Breiten/Höhen verwendet.
Um es zu wiederholen: VH steht für „Viewport Height“ (Höhe des Ansichtsbereichs), was der Höhe des sichtbaren Bildschirms entspricht. 100VH würde 100 % der Viewport-Höhe oder der vollen Bildschirmhöhe entsprechen. Und natürlich steht VW für „Viewport Width“ (Breite des Ansichtsbereichs), was der Breite des sichtbaren Bildschirms entspricht. 100VW würde 100 % der Viewport-Breite oder der vollen Bildschirmbreite entsprechen. % spiegelt einen Prozentsatz der Größe des Elternelements wider, unabhängig von der Größe des Ansichtsbereichs.
Schauen wir uns einige Beispiele an, wo Elementor Optionen für %, VW und VH bietet.
- Spaltenbreiten: Wenn Sie das Layout einer Elementor-Spalte bearbeiten, werden Sie feststellen, dass nur eine Breitengrößeneinheit verfügbar ist: %. Spaltenbreiten funktionieren nur gut und responsiv, wenn Prozentsätze verwendet werden, 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, wenn die Skalierung für ein mobiles Gerät beispielsweise reduziert wird. Durch die Verwendung eines Prozentsatzes der Gerätebreite bleiben Ihre Ränder im Verhältnis zur Größe des Inhalts, was fast immer vorzuziehen ist.
- Abstände: Der Abstand eines Abschnitts kann in PX, EM oder % angegeben werden. Wie bei den Rändern ist es oft vorzuziehen, EM oder % zu verwenden, damit der Abstand relativ bleibt, wenn die Seitengröße zunimmt.
- Schriftgröße: Wenn Sie die Typografie eines Elements wie einer Überschrift bearbeiten, sehen Sie vier Optionen: PX, EM, REM und VH.
Haben Sie jemals eine große Überschrift erstellt und bewundert, wie gut sie auf dem Desktop aussah, nur um dann festzustellen, dass sie auf dem Mobilgerät zu groß war?
Der Schlüssel zur eleganten 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 Elternelement der Überschrift ist. Aber wenn Sie es vorziehen, dass die Größe relativ zur Größe des Roots (HTML) ist, wählen Sie stattdessen REM. Oder Sie können es so einstellen, dass es relativ zur Breite des Viewports (VW) ist, wenn das für Ihren Fall besser funktioniert.
Beachten Sie, dass Sie auch gerätespezifische PX-Schriftgrößenwerte festlegen können, indem Sie die Gerätesymbole verwenden, um eine Größe für Desktop, Tablet und Mobilgerät anzugeben. Aber das setzt immer noch Grenzen für die Reaktionsfähigkeit und Barrierefreiheit, also bedenken Sie dies, wenn Sie PX wählen.
Mehr über VW und VH
Die Viewport-Einheiten stellen einen Prozentsatz des aktuellen Browser-Viewports (aktuelle Browsergröße) dar. Obwohl sie Prozenteinheiten ähnlich sind, gibt es einen Unterschied. Viewport-Einheiten werden als Prozentsatz der aktuellen Viewport-Größe des Browsers berechnet. Prozenteinheiten hingegen werden als Prozentsatz des Elternelements berechnet, das sich von der Viewport-Größe unterscheiden kann.
Betrachten wir ein Beispiel eines mobilen Bildschirm-Viewports von 480 px x 800 px.
1 VW = 1 % der Viewport-Breite (oder 4,8 px)
50 VW = 50 % der Viewport-Breite (oder 240 px)
1 VH = 1 % der Viewport-Höhe (oder 8 px)
50 VH = 50 % der Viewport-Höhe (oder 400 px)
Wenn sich die Viewport-Größe ändert, ändert sich die Größe des Elements entsprechend.
Wann sollte ich eine Einheit gegenüber einer anderen verwenden?
Letztendlich 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 Webseite die beste Chance hat, ein responsives Design darzustellen. Wählen Sie jedoch PX, wenn Sie sicherstellen müssen, dass ein Element an keinem Breakpoint seine Größe ändert und gleich bleibt, unabhängig davon, ob ein Benutzer eine andere Standardgröße gewählt hat. PX-Einheiten garantieren konsistente Ergebnisse, auch wenn das nicht ideal ist.
- EM ist relativ zur Schriftgröße des Elternelements. Wenn Sie also die Größe des Elements basierend auf der Größe seines Elternelements skalieren möchten, verwenden Sie EM.
- REM ist relativ zur Schriftgröße des Roots (HTML), und wenn dieser nicht festgelegt ist, wird der im Browser konfigurierte verwendet. Wenn Sie also die Größe des Elements basierend auf der Größe des Roots skalieren möchten, unabhängig von der Größe des Elternelements, verwenden Sie REM. Wenn Sie EM verwendet haben und aufgrund vieler verschachtelter Elemente Größenprobleme feststellen, ist REM wahrscheinlich die beste Wahl.
- VW ist nützlich zum Erstellen von Elementen mit voller Breite (100 %), die die gesamte Breite des Viewports ausfüllen. Natürlich können Sie jeden Prozentsatz der Viewport-Breite verwenden, um andere Ziele zu erreichen, wie 50 % für die halbe Breite usw.
- VH ist nützlich zum Erstellen von Elementen mit voller Höhe (100 %), die die gesamte Höhe des Viewports ausfüllen. Natürlich können Sie jeden Prozentsatz der Viewport-Höhe verwenden, um andere Ziele zu erreichen, wie 50 % für die halbe Höhe usw.
- % ist ähnlich wie VW und VH, ist aber keine Länge relativ zur Breite oder Höhe des Viewports. Stattdessen ist es ein Prozentsatz der Breite oder Höhe des Elternelements. Prozenteinheiten sind in der Regel nützlich, um beispielsweise die Breite von Rändern festzulegen.
- Elementor macht es einfach, die Option zu wählen, die am besten zu Ihrem Design passt. Letztendlich ist es Ihre Wahl.