{"id":7182,"date":"2021-07-20T21:06:17","date_gmt":"2021-07-20T19:06:17","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/was-ist-der-unterschied-zwischen-px-em-rem-vw-und-vh\/"},"modified":"2026-09-02T23:09:45","modified_gmt":"2026-09-02T21:09:45","slug":"was-ist-der-unterschied-zwischen-px-em-rem-vw-und-vh","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/de\/was-ist-der-unterschied-zwischen-px-em-rem-vw-und-vh\/","title":{"rendered":"Was ist der Unterschied zwischen PX, EM, REM, %, VW und VH?"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Schritt-f\u00fcr-Schritt-Video<\/h2>\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Cu\u00e1l es la diferencia entre PX, EM, REM, VW\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/JBt29Y1AwsQ?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n<h2 class=\"wp-block-heading\" id=\"0-estructura-b%C3%A1sica-de-un-documento-html\">Grundstruktur eines HTML-Dokuments<\/h2>\n\n<p class=\"wp-block-paragraph\">Wie Carl Sagan sagte: <a href=\"https:\/\/www.youtube.com\/watch?v=LTo31PjL05c\" target=\"_blank\" rel=\"noreferrer noopener\">\u201eWenn Sie <em>einen Apfelkuchen von Grund auf neu backen wollen, m\u00fcssen Sie zuerst das Universum erfinden<\/em>\u201c<\/a>. Und ja, um relative Einheiten in Elementor zu verstehen, was ein Elternelement oder der Root-Container ist usw., m\u00fcssen wir zuerst wissen, wie eine Webseite in der HTML-Sprache grundlegend strukturiert ist.<\/p>\n\n<p class=\"wp-block-paragraph\">Hier sehen wir die Mindeststruktur eines HTML-Dokuments (Hypertext Markup Language). Die HTML-Sprache besteht aus Tags, die durch die Zeichen kleiner als  <strong>&lt;<\/strong>  und gr\u00f6\u00dfer als  <strong>&gt;<\/strong> begrenzt werden: Beispiel  &lt;html&gt;, mit Ausnahmen wie dem ersten Tag  &lt;!DOCTYPE html&gt; , das absolut ist, haben alle Tags eine \u00d6ffnung und Schlie\u00dfung, Beispiel  <strong>&lt;h1&gt;<\/strong>\u00dcberschrift <strong>&lt;\/h1&gt;<\/strong>; der Abschluss unterscheidet sich dadurch, dass die \u00d6ffnung des Tags <strong><span class=\"has-inline-color has-black-color\">&lt;\/<\/span><\/strong> enth\u00e4lt, also zus\u00e4tzlich zum \u201eKleiner-als-Zeichen\u201c den Schr\u00e4gstrich, auch <strong>Slash<\/strong> <strong>\/<\/strong> genannt.<\/p>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a994c7b4bc6d&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a994c7b4bc6d\" class=\"aligncenter size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"561\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML.png\" alt=\"Mindeststruktur eines HTML-Dokuments\" class=\"wp-image-5034\" style=\"width:648px;height:379px\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML.png 960w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-500x292.png 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-768x449.png 768w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-600x351.png 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<ol class=\"wp-block-list\">\n<li> Die erste Zeile des Beispiels ist ein absolutes Element (es hat kein schlie\u00dfendes Tag); es ist eine <strong>Dokumenttyp-Deklaration<\/strong> (auch <strong>DOCTYPE-Deklaration<\/strong> genannt), die dieses Dokument als HTML5-Dokument identifiziert und modernen Browsern erm\u00f6glicht zu wissen, dass sie das Dokument gem\u00e4\u00df der HTML5-Spezifikation interpretieren sollen.<\/li>\n\n\n\n<li>Das gesamte Dokument ist in einem <strong>html<\/strong> enthalten. Das <strong>html<\/strong> wird als <strong>Root-Element<\/strong> bezeichnet, weil es alle Elemente des Dokuments enth\u00e4lt und in keinem anderen Element enthalten sein kann. <\/li>\n\n\n\n<li>Innerhalb von <strong>html<\/strong> unterteilt sich das Dokument in einen Kopfbereich (head) und einen K\u00f6rper (body). Der <strong>head<\/strong> enth\u00e4lt beschreibende Informationen \u00fcber das Dokument selbst, wie seinen Titel, die verwendeten Stylesheets, Skripte und andere Arten von \u201eMeta\u201c-Informationen. <\/li>\n\n\n\n<li>Der <strong>body<\/strong> ist der K\u00f6rper der Seite, das Element enth\u00e4lt alles, was wir im Browserfenster anzeigen m\u00f6chten.<\/li>\n\n\n\n<li>Die <strong>meta<\/strong>-Elemente innerhalb des head-Tags liefern Informationen \u00fcber 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. <\/li>\n\n\n\n<li>Innerhalb des head befindet sich auch das obligatorische <strong>title<\/strong>-Tag. Gem\u00e4\u00df 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.  <\/li>\n\n\n\n<li>Innerhalb des body-Blocks k\u00f6nnen wir so viele Abschnitte erstellen, wie wir m\u00f6chten, das <strong>div<\/strong>-Tag. Dieses Tag erm\u00f6glicht es, mehrere Blockelemente (Abs\u00e4tze, \u00dcberschriften, Listen usw.) zu gruppieren. Diese Abschnitte sind Container. <\/li>\n\n\n\n<li>Dies ist ein weiterer Abschnitt, genau wie der vorherige.<\/li>\n<\/ol>\n<div class=\"wp-block-image\">\n<figure data-wp-context=\"{&quot;imageId&quot;:&quot;6a994c7b4c2b0&quot;}\" data-wp-interactive=\"core\/image\" data-wp-key=\"6a994c7b4c2b0\" class=\"aligncenter size-full is-resized wp-lightbox-container\"><img loading=\"lazy\" decoding=\"async\" width=\"960\" height=\"790\" data-wp-class--hide=\"state.isContentHidden\" data-wp-class--show=\"state.isContentVisible\" data-wp-init=\"callbacks.setButtonStyles\" data-wp-on--click=\"actions.showLightbox\" data-wp-on--load=\"callbacks.setButtonStyles\" data-wp-on--pointerdown=\"actions.preloadImage\" data-wp-on--pointerenter=\"actions.preloadImageWithDelay\" data-wp-on--pointerleave=\"actions.cancelPreload\" data-wp-on-window--resize=\"callbacks.setButtonStyles\" src=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2.png\" alt=\"Mindeststruktur eines HTML-Dokuments\" class=\"wp-image-5035\" style=\"width:533px;height:439px\" srcset=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2.png 960w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2-500x411.png 500w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2-768x632.png 768w, https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2025\/12\/Esquema-HTML-2-600x494.png 600w\" sizes=\"auto, (max-width: 960px) 100vw, 960px\" \/><button\n\t\t\tclass=\"lightbox-trigger\"\n\t\t\ttype=\"button\"\n\t\t\taria-haspopup=\"dialog\"\n\t\t\tdata-wp-bind--aria-label=\"state.thisImage.triggerButtonAriaLabel\"\n\t\t\tdata-wp-init=\"callbacks.initTriggerButton\"\n\t\t\tdata-wp-on--click=\"actions.showLightbox\"\n\t\t\tdata-wp-style--right=\"state.thisImage.buttonRight\"\n\t\t\tdata-wp-style--top=\"state.thisImage.buttonTop\"\n\t\t>\n\t\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"12\" height=\"12\" fill=\"none\" viewBox=\"0 0 12 12\">\n\t\t\t\t<path fill=\"#fff\" d=\"M2 0a2 2 0 0 0-2 2v2h1.5V2a.5.5 0 0 1 .5-.5h2V0H2Zm2 10.5H2a.5.5 0 0 1-.5-.5V8H0v2a2 2 0 0 0 2 2h2v-1.5ZM8 12v-1.5h2a.5.5 0 0 0 .5-.5V8H12v2a2 2 0 0 1-2 2H8Zm2-12a2 2 0 0 1 2 2v2h-1.5V2a.5.5 0 0 0-.5-.5H8V0h2Z\" \/>\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n<p class=\"wp-block-paragraph\">Wie Sie in der <em>Abbildung<\/em> sehen k\u00f6nnen, sind all diese Tags wie eine Art Container, die Wurzel oder das Hauptelement ist das <strong>html<\/strong>-Tag, das alle anderen enth\u00e4lt, innerhalb von <strong>html<\/strong> haben wir den <strong>body<\/strong>, und wiederum innerhalb des <strong>body<\/strong> haben wir andere <strong>div<\/strong>. Wir k\u00f6nnen also sagen, dass das <strong>Root-Element<\/strong> <strong>html<\/strong> ist, <strong>body<\/strong> ist ein Kind von <strong>html<\/strong> und die <strong>div<\/strong> sind Kinder von <strong>body<\/strong>. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"1-unidades-de-medida-de-elementor\">Ma\u00dfeinheiten von Elementor<\/h2>\n\n<p class=\"wp-block-paragraph\" id=\"unidades\">Beim Gestalten mit Elementor k\u00f6nnen Sie sehen, dass einige Elemente Gr\u00f6\u00dfenoptionen haben, mit denen Sie <strong>PX, EM, REM, %, VW<\/strong> oder <strong>VH<\/strong> w\u00e4hlen k\u00f6nnen. Aber was bedeuten diese Ma\u00dfeinheiten wirklich und wann sollten Sie die eine oder andere verwenden?  <\/p>\n\n<p class=\"wp-block-paragraph\">Beginnen wir mit den Grundlagen: In CSS k\u00f6nnen Sie Gr\u00f6\u00dfen oder L\u00e4ngen von Elementen mit verschiedenen Ma\u00dfeinheiten angeben. Die Ma\u00dfeinheiten, die Sie in einigen Optionen der Elementor-Widgets finden, umfassen <em>PX, EM, REM, %, VW und VH<\/em>, obwohl in CSS mehrere weitere verf\u00fcgbar sind. Nicht alle Elementor-Elemente bieten alle diese Einheiten an. Elementor pr\u00e4sentiert nur die Optionen, die f\u00fcr das jeweilige Element am sinnvollsten sind.   <\/p>\n\n<p class=\"wp-block-paragraph\">Der wichtigste Aspekt beim Erlernen der verschiedenen Einheiten ist, dass einige Einheiten wie PX <strong>absolute Einheiten<\/strong> sind und andere <strong>relative Einheiten<\/strong>.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"2-unidades-absolutas\">Absolute Einheiten<\/h2>\n\n<p class=\"wp-block-paragraph\"><strong>PX<\/strong>: Pixel (px) gelten als absolute Einheiten, obwohl sie relativ zum DPI und zur Aufl\u00f6sung des Anzeigeger\u00e4ts sind. Aber auf dem Ger\u00e4t selbst ist die PX-Einheit fest und \u00e4ndert sich nicht basierend auf einem anderen Element. Die Verwendung von PX kann f\u00fcr responsive Websites problematisch sein, ist aber n\u00fctzlich, um eine konsistente Gr\u00f6\u00dfe f\u00fcr einige Elemente beizubehalten. Wenn Sie Elemente haben, deren Gr\u00f6\u00dfe nicht ge\u00e4ndert werden soll, ist die Verwendung von PX eine gute Wahl.   <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"3-unidades-relativas\">Relative Einheiten<\/h2>\n\n<ul class=\"wp-block-list\">\n<li><strong>EM<\/strong>: relativ zum Elternelement<\/li>\n\n\n\n<li><strong>REM<\/strong>: relativ zum Root-Element (HTML-Tag und standardm\u00e4\u00dfig die im Browser konfigurierte Gr\u00f6\u00dfe)<\/li>\n\n\n\n<li><strong>%<\/strong>: relativ zum Elternelement<\/li>\n\n\n\n<li><strong>VW<\/strong>: relativ zur Breite des Viewports<\/li>\n\n\n\n<li><strong>VH<\/strong>: relativ zur H\u00f6he des Viewports<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Im Gegensatz zu PX passen sich relative Einheiten wie %, EM und REM besser an responsives Design an und helfen auch, <strong>Barrierefreiheitsstandards zu erf\u00fcllen<\/strong>. Relative Einheiten skalieren besser auf verschiedenen Ger\u00e4ten, da sie basierend auf der Gr\u00f6\u00dfe eines anderen Elements nach oben und unten skalieren k\u00f6nnen. <\/p>\n\n<p class=\"wp-block-paragraph\">Schauen wir uns ein einfaches Beispiel an: In den meisten Browsern betr\u00e4gt die Standard-Schriftgr\u00f6\u00dfe <strong>16 px<\/strong>. Relative Einheiten berechnen die Gr\u00f6\u00dfe aus dieser Basis. Wenn Sie diese Basis \u00e4ndern, indem Sie eine Basisgr\u00f6\u00dfe f\u00fcr das HTML-Tag \u00fcber CSS festlegen, wird dies zur Basis f\u00fcr die Berechnung der relativen Einheiten auf dem Rest der Seite. Ebenso wird, wenn ein Benutzer seine Schriftgr\u00f6\u00dfe anpasst, dies zur Basis f\u00fcr die Berechnung der relativen Einheiten.   <\/p>\n\n<p class=\"wp-block-paragraph\">Was bedeuten also diese Einheiten beim Standardwert von 16 px?<\/p>\n\n<p class=\"wp-block-paragraph\">Die von Ihnen angegebene Zahl multipliziert diese Zahl mit der Standardgr\u00f6\u00dfe.<\/p>\n\n<p class=\"wp-block-paragraph\">1 em = 16 px (1 * 16)<\/p>\n\n<p class=\"wp-block-paragraph\">2 em = 32 px (2 * 16)<\/p>\n\n<p class=\"wp-block-paragraph\">0,5 em = 8 px (0,5 * 16)<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1 rem = 16 px<\/p>\n\n<p class=\"wp-block-paragraph\">2 rem = 32 px<\/p>\n\n<p class=\"wp-block-paragraph\">0,5 rem = 8 px<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">100 % = 16 px<\/p>\n\n<p class=\"wp-block-paragraph\">200 % = 32 px<\/p>\n\n<p class=\"wp-block-paragraph\">50 % = 8 px<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">Gut, gro\u00dfartig, aber was passiert, wenn der Benutzer die Standardgr\u00f6\u00dfe in seinem Browser \u00e4ndert? Da es sich um relative Einheiten handelt, basieren die endg\u00fcltigen Gr\u00f6\u00dfenwerte auf der neuen Basisgr\u00f6\u00dfe. Obwohl der Browser-Standard normalerweise 16 px betr\u00e4gt, w\u00fcrden die berechneten Gr\u00f6\u00dfen, wenn der Benutzer ihn auf 14 px \u00e4ndern w\u00fcrde, wie folgt aussehen:  <\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1 em = 14 px (1 * 14)<\/p>\n\n<p class=\"wp-block-paragraph\">2 em = 28 px (2 * 14)<\/p>\n\n<p class=\"wp-block-paragraph\">0,5 em = 7 px (0,5 * 14)<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1 rem = 14 px<\/p>\n\n<p class=\"wp-block-paragraph\">2 rem = 28 px<\/p>\n\n<p class=\"wp-block-paragraph\">0,5 rem = 7 px<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">100 % = 14 px<\/p>\n\n<p class=\"wp-block-paragraph\">200 % = 28 px<\/p>\n\n<p class=\"wp-block-paragraph\">50 % = 7 px<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">Dies gibt dem Benutzer die Freiheit, die Standard-Schriftgr\u00f6\u00dfe seines Browsers anzupassen, w\u00e4hrend die relative Skalierung jedes von Ihnen angegebenen Elements beibehalten wird.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"4-%C2%BFcu%C3%A1l-es-la-diferencia-entre-em-y-rem\">Was ist der Unterschied zwischen EM und REM?<\/h2>\n\n<p class=\"wp-block-paragraph\">Wenn man sich die obige Grafik ansieht, zeigt sie EM und REM mit genau demselben Aussehen. Worin unterscheiden sie sich also? <\/p>\n\n<p class=\"wp-block-paragraph\">Kurz gesagt, sie unterscheiden sich in der Vererbung. Wie erw\u00e4hnt, basiert <strong>REM<\/strong> auf dem <strong>Root-Element<\/strong> (HTML) und standardm\u00e4\u00dfig, wenn es nicht festgelegt ist, auf dem Browser des Benutzers, der <strong>standardm\u00e4\u00dfig auf 16 px eingestellt ist<\/strong>. Jedes untergeordnete Element, das <strong>REM<\/strong> verwendet, verwendet die Gr\u00f6\u00dfe des HTML-Roots als Berechnungspunkt, unabh\u00e4ngig davon, ob ein Elternelement unterschiedliche Gr\u00f6\u00dfen angegeben hat oder nicht.  <\/p>\n\n<p class=\"wp-block-paragraph\"><strong>EM<\/strong> hingegen basiert auf der Schriftgr\u00f6\u00dfe des Elternelements. Wenn ein Elternelement eine andere Gr\u00f6\u00dfe als das Root-Element hat, basiert die Berechnung von <strong>EM<\/strong> auf dem Elternelement und nicht auf dem Root-Element. Dies bedeutet, dass verschachtelte Elemente, die <strong>EM<\/strong> zur Dimensionierung verwenden, manchmal eine Gr\u00f6\u00dfe haben k\u00f6nnen, die Sie nicht erwartet haben. Andererseits gibt es Ihnen eine detailliertere Kontrolle, wenn Sie diese ben\u00f6tigen, um die Gr\u00f6\u00dfe eines bestimmten Bereichs einer Seite anzugeben.   <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"5-entonces-%C2%BFqu%C3%A9-pasa-con-vw-y-vh-%C2%BFde-qu%C3%A9-se-tratan\">Was ist also mit %, VW und VH? Worum geht es dabei? <\/h2>\n\n<p class=\"wp-block-paragraph\">W\u00e4hrend <strong>PX<\/strong>, <strong>EM<\/strong> und <strong>REM<\/strong> haupts\u00e4chlich f\u00fcr die Schriftgr\u00f6\u00dfe verwendet werden, werden <strong>%<\/strong>, <strong>VW<\/strong> und <strong>VH<\/strong> haupts\u00e4chlich f\u00fcr R\u00e4nder, Abst\u00e4nde, Spacing und Breiten\/H\u00f6hen verwendet.<\/p>\n\n<p class=\"wp-block-paragraph\">Um es zu wiederholen: <strong>VH<\/strong> steht f\u00fcr \u201eViewport Height\u201c (H\u00f6he des Ansichtsbereichs), was der H\u00f6he des sichtbaren Bildschirms entspricht. <strong>100VH<\/strong> w\u00fcrde 100 % der Viewport-H\u00f6he oder der vollen Bildschirmh\u00f6he entsprechen. Und nat\u00fcrlich steht <strong>VW<\/strong> f\u00fcr \u201eViewport Width\u201c (Breite des Ansichtsbereichs), was der Breite des sichtbaren Bildschirms entspricht. <strong>100VW<\/strong> w\u00fcrde 100 % der Viewport-Breite oder der vollen Bildschirmbreite entsprechen. <strong>%<\/strong> spiegelt einen Prozentsatz der Gr\u00f6\u00dfe des <strong>Elternelements<\/strong> wider, unabh\u00e4ngig von der Gr\u00f6\u00dfe des Ansichtsbereichs. <\/p>\n\n<p class=\"wp-block-paragraph\">Schauen wir uns einige Beispiele an, wo Elementor Optionen f\u00fcr <strong>%<\/strong>, <strong>VW<\/strong> und <strong>VH<\/strong> bietet.<\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>Spaltenbreiten<\/strong>: Wenn Sie das Layout einer Elementor-Spalte bearbeiten, werden Sie feststellen, dass nur eine Breitengr\u00f6\u00dfeneinheit verf\u00fcgbar ist: %. Spaltenbreiten funktionieren nur gut und responsiv, wenn Prozents\u00e4tze verwendet werden, daher wird keine andere Option angeboten. <\/li>\n\n\n\n<li><strong>R\u00e4nder<\/strong>: Die R\u00e4nder eines Abschnitts k\u00f6nnen in PX oder % angegeben werden. Im Allgemeinen ist es vorzuziehen, % zu verwenden, um sicherzustellen, dass die R\u00e4nder nicht gr\u00f6\u00dfer als der Inhalt sind, wenn die Skalierung f\u00fcr ein mobiles Ger\u00e4t beispielsweise reduziert wird. Durch die Verwendung eines Prozentsatzes der Ger\u00e4tebreite bleiben Ihre R\u00e4nder im Verh\u00e4ltnis zur Gr\u00f6\u00dfe des Inhalts, was fast immer vorzuziehen ist.  <\/li>\n\n\n\n<li><strong>Abst\u00e4nde<\/strong>: Der Abstand eines Abschnitts kann in PX, EM oder % angegeben werden. Wie bei den R\u00e4ndern ist es oft vorzuziehen, EM oder % zu verwenden, damit der Abstand relativ bleibt, wenn die Seitengr\u00f6\u00dfe zunimmt. <\/li>\n\n\n\n<li><strong>Schriftgr\u00f6\u00dfe<\/strong>: Wenn Sie die Typografie eines Elements wie einer \u00dcberschrift bearbeiten, sehen Sie vier Optionen: PX, EM, REM und VH.<\/li>\n<\/ul>\n\n<p class=\"wp-block-paragraph\">Haben Sie jemals eine gro\u00dfe \u00dcberschrift erstellt und bewundert, wie gut sie auf dem Desktop aussah, nur um dann festzustellen, dass sie auf dem Mobilger\u00e4t zu gro\u00df war?<\/p>\n\n<p class=\"wp-block-paragraph\">Der Schl\u00fcssel zur eleganten L\u00f6sung dieses Problems besteht darin, EM, REM oder VW anstelle von PX zu verwenden. Was Sie w\u00e4hlen, h\u00e4ngt von Ihrer speziellen Situation ab. Normalerweise w\u00e4hle ich EM, weil ich m\u00f6chte, dass die Gr\u00f6\u00dfe relativ zum Elternelement der \u00dcberschrift ist. Aber wenn Sie es vorziehen, dass die Gr\u00f6\u00dfe relativ zur Gr\u00f6\u00dfe des Roots (HTML) ist, w\u00e4hlen Sie stattdessen REM. Oder Sie k\u00f6nnen es so einstellen, dass es relativ zur Breite des Viewports (VW) ist, wenn das f\u00fcr Ihren Fall besser funktioniert.     <\/p>\n\n<p class=\"wp-block-paragraph\">Beachten Sie, dass Sie auch ger\u00e4tespezifische PX-Schriftgr\u00f6\u00dfenwerte festlegen k\u00f6nnen, indem Sie die Ger\u00e4tesymbole verwenden, um eine Gr\u00f6\u00dfe f\u00fcr Desktop, Tablet und Mobilger\u00e4t anzugeben. Aber das setzt immer noch Grenzen f\u00fcr die Reaktionsf\u00e4higkeit und Barrierefreiheit, also bedenken Sie dies, wenn Sie PX w\u00e4hlen. <\/p>\n\n<h2 class=\"wp-block-heading\" id=\"6-m%C3%A1s-sobre-vw-y-vh\">Mehr \u00fcber VW und VH<\/h2>\n\n<p class=\"wp-block-paragraph\">Die Viewport-Einheiten stellen einen Prozentsatz des aktuellen Browser-Viewports (aktuelle Browsergr\u00f6\u00dfe) dar. Obwohl sie Prozenteinheiten \u00e4hnlich sind, gibt es einen Unterschied. Viewport-Einheiten werden als Prozentsatz der aktuellen Viewport-Gr\u00f6\u00dfe des Browsers berechnet. Prozenteinheiten hingegen werden als Prozentsatz des <strong>Elternelements<\/strong> berechnet, das sich von der Viewport-Gr\u00f6\u00dfe unterscheiden kann.   <\/p>\n\n<p class=\"wp-block-paragraph\">Betrachten wir ein Beispiel eines mobilen Bildschirm-Viewports von 480 px x 800 px.<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1 VW = 1 % der Viewport-Breite (oder 4,8 px)<\/p>\n\n<p class=\"wp-block-paragraph\">50 VW = 50 % der Viewport-Breite (oder 240 px)<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">1 VH = 1 % der Viewport-H\u00f6he (oder 8 px)<\/p>\n\n<p class=\"wp-block-paragraph\">50 VH = 50 % der Viewport-H\u00f6he (oder 400 px)<\/p>\n\n<hr class=\"wp-block-separator has-text-color has-cyan-bluish-gray-color has-css-opacity has-cyan-bluish-gray-background-color has-background is-style-wide\"\/>\n\n<p class=\"wp-block-paragraph\">Wenn sich die Viewport-Gr\u00f6\u00dfe \u00e4ndert, \u00e4ndert sich die Gr\u00f6\u00dfe des Elements entsprechend.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"7-%C2%BFcu%C3%A1ndo-deber%C3%ADa-usar-una-unidad-sobre-otra\">Wann sollte ich eine Einheit gegen\u00fcber einer anderen verwenden?<\/h2>\n\n<p class=\"wp-block-paragraph\">Letztendlich gibt es keine perfekte Antwort auf diese Frage. Im Allgemeinen ist es oft besser, eine der relativen Einheiten anstelle von PX zu w\u00e4hlen, damit Ihre Webseite die beste Chance hat, ein responsives Design darzustellen. W\u00e4hlen Sie jedoch <strong>PX<\/strong>, wenn Sie sicherstellen m\u00fcssen, dass ein Element an keinem Breakpoint seine Gr\u00f6\u00dfe \u00e4ndert und gleich bleibt, unabh\u00e4ngig davon, ob ein Benutzer eine andere Standardgr\u00f6\u00dfe gew\u00e4hlt hat. PX-Einheiten garantieren konsistente Ergebnisse, auch wenn das nicht ideal ist.   <\/p>\n\n<ul class=\"wp-block-list\">\n<li><strong>EM<\/strong> ist relativ zur Schriftgr\u00f6\u00dfe des Elternelements. Wenn Sie also die Gr\u00f6\u00dfe des Elements basierend auf der Gr\u00f6\u00dfe seines Elternelements skalieren m\u00f6chten, verwenden Sie EM.<\/li>\n\n\n\n<li><strong>REM<\/strong> ist relativ zur Schriftgr\u00f6\u00dfe des Roots (HTML), und wenn dieser nicht festgelegt ist, wird der im Browser konfigurierte verwendet. Wenn Sie also die Gr\u00f6\u00dfe des Elements basierend auf der Gr\u00f6\u00dfe des Roots skalieren m\u00f6chten, unabh\u00e4ngig von der Gr\u00f6\u00dfe des Elternelements, verwenden Sie REM. Wenn Sie EM verwendet haben und aufgrund vieler verschachtelter Elemente Gr\u00f6\u00dfenprobleme feststellen, ist REM wahrscheinlich die beste Wahl. <\/li>\n\n\n\n<li><strong>VW<\/strong> ist n\u00fctzlich zum Erstellen von Elementen mit voller Breite (100 %), die die gesamte Breite des Viewports ausf\u00fcllen. Nat\u00fcrlich k\u00f6nnen Sie jeden Prozentsatz der Viewport-Breite verwenden, um andere Ziele zu erreichen, wie 50 % f\u00fcr die halbe Breite usw. <\/li>\n\n\n\n<li><strong>VH<\/strong> ist n\u00fctzlich zum Erstellen von Elementen mit voller H\u00f6he (100 %), die die gesamte H\u00f6he des Viewports ausf\u00fcllen. Nat\u00fcrlich k\u00f6nnen Sie jeden Prozentsatz der Viewport-H\u00f6he verwenden, um andere Ziele zu erreichen, wie 50 % f\u00fcr die halbe H\u00f6he usw. <\/li>\n\n\n\n<li><strong>%<\/strong> ist \u00e4hnlich wie VW und VH, ist aber keine L\u00e4nge relativ zur Breite oder H\u00f6he des Viewports. Stattdessen ist es ein Prozentsatz der Breite oder H\u00f6he des Elternelements. Prozenteinheiten sind in der Regel n\u00fctzlich, um beispielsweise die Breite von R\u00e4ndern festzulegen.  <\/li>\n\n\n\n<li>Elementor macht es einfach, die Option zu w\u00e4hlen, die am besten zu Ihrem Design passt. Letztendlich ist es Ihre Wahl. <\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Schritt-f\u00fcr-Schritt-Video Grundstruktur eines HTML-Dokuments Wie Carl Sagan sagte: \u201eWenn Sie einen Apfelkuchen von Grund auf neu backen wollen, m\u00fcssen Sie zuerst das Universum erfinden\u201c. Und ja, um relative Einheiten in Elementor zu verstehen, was ein Elternelement oder der Root-Container ist usw., m\u00fcssen wir zuerst wissen, wie eine Webseite in der HTML-Sprache grundlegend strukturiert ist. Hier [&hellip;]<\/p>\n","protected":false},"author":4,"featured_media":7183,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"PX, EM, REM, VW und VH: CSS-Einheiten einfach erkl\u00e4rt","_seopress_titles_desc":"Grundstruktur eines HTML-Dokuments Wie Carl Sagan sagte: \u201eWenn Sie einen Apfelkuchen von Grund auf neu backen wollen, m\u00fcssen Sie zuerst das Universum erfinden\u201c \u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[452],"tags":[444,433,404],"class_list":["post-7182","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","tag-elementor","tag-webdesign","tag-wordpress-personalisierung"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts\/7182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/comments?post=7182"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts\/7182\/revisions"}],"predecessor-version":[{"id":7184,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/posts\/7182\/revisions\/7184"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/media\/7183"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/media?parent=7182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/categories?post=7182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/de\/wp-json\/wp\/v2\/tags?post=7182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}