{"id":54730,"date":"2024-08-26T07:00:00","date_gmt":"2024-08-26T14:00:00","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=54730"},"modified":"2025-01-07T06:06:19","modified_gmt":"2025-01-07T14:06:19","slug":"rem-vs-em","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/","title":{"rendered":"REM vs. EM: Wie Sie die richtige CSS-Einheit w\u00e4hlen"},"content":{"rendered":"<p>Sie tr\u00e4umen wahrscheinlich nachts nicht von der Gr\u00f6\u00dfenbestimmung von CSS-Elementen, aber wenn Sie <a href=\"https:\/\/www.dreamhost.com\/de\/ki-website-builder\/\" target=\"_blank\" rel=\"noreferrer noopener\">eine Website<\/a> oder eine App erstellen, ist dieses Thema definitiv \u00fcberlegenswert.<\/p>\n<p>W\u00e4hrend einige CSS-Einheiten gut mit Ihrem responsiven Design harmonieren, k\u00f6nnten andere eine rebellische Ader zeigen. Die verschiedenen Charaktere unterscheiden zu k\u00f6nnen, kann Ihnen sp\u00e4ter einige gro\u00dfe Kopfschmerzen ersparen.<\/p>\n<p>Nehmen Sie die Kombination aus REM und EM. Welches sollten Sie verwenden und warum?<\/p>\n<p>Bleiben Sie die n\u00e4chsten Abs\u00e4tze bei uns, und wir werden alles enth\u00fcllen!<\/p>\n<h2 id=\"h-rem-vs-em-in-a-nutshell\" class=\"wp-block-heading\">REM vs. EM im \u00dcberblick<\/h2>\n<p>Wenn Sie eine schnelle Antwort suchen, <strong>hier ist die TL;DR-Version<\/strong>:<\/p>\n<ul class=\"wp-block-list\"><li><strong>REM:<\/strong> Diese Einheit basiert auf dem Wurzelelement (normalerweise das <code>&lt;html&gt;<\/code> Tag). Egal was sonst auf der Seite passiert, Ihre Gr\u00f6\u00dfenangabe bleibt konsistent.<\/li><li><strong>EM:<\/strong> Diese Einheit sucht nach Orientierung. Wenn sich das \u00fcbergeordnete Element \u00e4ndert, passt sich Ihre Gr\u00f6\u00dfenangabe entsprechend an.<\/li><\/ul>\n<p>Wenn Sie sich den Unterschied merken m\u00f6chten, denken Sie daran, dass das \u201eR\u201c in REM f\u00fcr \u201eRoot\u201c steht.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1119\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css.webp\" alt=\"Vergleich der REM- und EM-Einheiten in CSS, die zeigen, wie sie sich jeweils auf Root- und Elternelemente beziehen.\" class=\"wp-image-48908 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-300x210.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1024x716.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-768x537.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1536x1074.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-600x420.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1200x839.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-730x511.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1460x1021.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-784x548.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-1568x1097.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/01_rem_vs_em_in_css-877x613.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1119;\" \/><\/figure>\n<p><strong><em>Nerd Hinweis<\/em><\/strong><em>: Warum enden beide Einheiten mit \u201eEM\u201c? Das ist keine Abk\u00fcrzung. Als aller Text noch gedruckt wurde, verwendeten Typografen die Breite eines gro\u00dfen M als Ma\u00dfstab f\u00fcr die Textgr\u00f6\u00dfe. Ziemlich raffiniert, oder?<\/em><\/p>\n<p><strong>Also, welches sollten Sie verwenden?<\/strong><\/p>\n<p>Nun, das kommt darauf an.&nbsp;<\/p>\n<p>Wenn Sie m\u00f6chten, dass sich der Text an seine Umgebung anpasst, k\u00f6nnte EM die bessere Option sein. Aber wenn Sie m\u00f6chten, dass die Gr\u00f6\u00dfe auf Ihrer gesamten Website konsistent bleibt, sollten Sie auf REM umstellen.<\/p>\n<p>Warum?<\/p>\n<ul class=\"wp-block-list\"><li><strong>EM:<\/strong> Flexibler, kann aber un\u00fcbersichtlich werden, wenn man nicht vorsichtig ist.<\/li><li><strong>REM:<\/strong> Einheitliche Gr\u00f6\u00dfen, gro\u00dfartig f\u00fcr responsives Design.<\/li><\/ul>\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>Responsives Design<\/h3>\n    <p>Das responsive Design erm\u00f6glicht es einer Website, sich an die Bildschirmgr\u00f6\u00dfe des Ger\u00e4ts anzupassen, auf dem sie betrachtet wird. Die Website wird daher auf verschiedenen Ger\u00e4ten unterschiedlich aussehen.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/responsive-design\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n<p>Immer noch verwirrt? Keine Sorge, wir werden gleich tiefer eintauchen.<\/p>\n<p>Merken Sie sich das vorerst: <strong>REM ist meistens die sicherere Wahl f\u00fcr die meisten Websites<\/strong>.<\/p>\n<div class=\"single__related-article\">\n\t<span>Related Article<\/span>\n\t<div class=\"single__related-article__wrap\">\n\t\t<div class=\"single__related-article__title\">\n\t\t\tWie man CSS im Jahr 2024 lernt (schnell &#038; kostenlos)\n\t\t<\/div>\n\t\t<a href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-lernen\/\" class=\"btn btn--sm btn--brand\" target=\"_blank\" rel=\"noopener\">\n\t\t\tRead More\n\t\t<\/a>\n\t<\/div>\n<\/div>\n<h2 id=\"h2_understanding-rem-and-em\" class=\"wp-block-heading\">Verst\u00e4ndnis von REM und EM<\/h2>\n<p>In Ordnung, lassen Sie uns etwas ins Detail gehen.<\/p>\n<p><strong>Sowohl REM als auch EM sind relative Einheiten. Das bedeutet, dass sie die gleiche Gr\u00f6\u00dfe <em>relativ<\/em> zu einem spezifischen Ma\u00dfstab beibehalten.<\/strong><\/p>\n<p>Diese Art von <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/elemente-des-webdesigns\/\" target=\"_blank\" rel=\"noreferrer noopener\">Gr\u00f6\u00dfenbestimmung spielt eine Schl\u00fcsselrolle im responsiven Design<\/a>.<\/p>\n<p>Absolute Gr\u00f6\u00dfen (z.B. px) bleiben immer gleich, was bedeutet, dass Text auf einem Desktop klein und auf einem Telefon riesig erscheinen kann. Im Gegensatz dazu k\u00f6nnen sich relative Einheiten an verschiedene Ger\u00e4te und Layouts anpassen.<\/p>\n<p>In einem digitalen Kontext werden REM und EM haupts\u00e4chlich zur Messung von Text verwendet. Sie k\u00f6nnen diese Einheiten jedoch auch f\u00fcr Folgendes verwenden:<\/p>\n<ul class=\"wp-block-list\"><li>R\u00e4nder<\/li><li>Abstand innen<\/li><li>Breite und H\u00f6he<\/li><li>Zeilenh\u00f6he<\/li><li>Rahmeneigenschaften<\/li><li>Schlagschatten<\/li><li>Positionierung<\/li><li>Media-Abfragen<\/li><\/ul>\n<p>Mit anderen Worten, REM und EM sind n\u00fctzlich, wenn Sie eine flexible Gr\u00f6\u00dfenanpassung in Ihrem Design w\u00fcnschen.<\/p>\n<p>Richtig, das deckt im Gro\u00dfen und Ganzen die Gemeinsamkeiten zwischen diesen beiden Einheiten ab.<\/p>\n<p>Lassen Sie uns nun einen genaueren Blick darauf werfen, was jeden von ihnen einzigartig macht.<\/p>\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n<h2 id=\"h2_getting-to-know-rem\" class=\"wp-block-heading\">REM kennenlernen<\/h2>\n<p>REM steht f\u00fcr \u201eroot em\u201c. Wenn Sie diese Einheit verwenden, definieren Sie, wie gro\u00df etwas im Verh\u00e4ltnis zur Schriftgr\u00f6\u00dfe Ihres Wurzelelements (normalerweise Ihr <code>&lt;html&gt;<\/code>-Tag) sein sollte.<\/p>\n<p>Die meisten Browser verwenden standardm\u00e4\u00dfig <code>16px<\/code> f\u00fcr das Root-Element. Es ist jedoch eine gute Idee, Ihre Standard-Schriftgr\u00f6\u00dfe <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/css-lernen\/\" target=\"_blank\" rel=\"noreferrer noopener\">mit CSS zu definieren<\/a>.<\/p>\n<p>Sie k\u00f6nnen es so machen:<\/p>\n<p><code>html { font-size: 16px; \/* Ihre Basis-Schriftgr\u00f6\u00dfe *\/ }<\/code><\/p>\n<p>Egal welche Gr\u00f6\u00dfe Sie w\u00e4hlen, sie wird zu <code>1rem<\/code>. Dies ist Ihre neue Basislinie f\u00fcr die gesamte Seite.<\/p>\n<p>Jede Figur, die gr\u00f6\u00dfer oder kleiner ist, wird die Gr\u00f6\u00dfe Ihres Ziellements relativ zu Ihrer gew\u00e4hlten Standardgr\u00f6\u00dfe \u00e4ndern.<\/p>\n<p>Es ist etwas kompliziert zu erkl\u00e4ren, daher hier ein einfaches Beispiel:<\/p>\n<p><code>html { font-size: 16px; \/* Ihre Basis-Schriftgr\u00f6\u00dfe *\/ }<br>body { font-size: 1.2rem; \/* 19.2px *\/ }<br>h1 { font-size: 2.4rem; \/* 38.4px *\/ }<\/code><\/p>\n<p>In diesem Szenario haben wir die Schriftgr\u00f6\u00dfe des <code>&lt;html&gt;<\/code>-Tags auf <code>16px<\/code> festgelegt. Dies ist unsere Basislinie von <code>1rem<\/code>.<\/p>\n<p>Wir m\u00f6chten, dass unser Flie\u00dftext etwas gr\u00f6\u00dfer als das ist. Daher setzen wir die Schriftgr\u00f6\u00dfe des <code>&lt;body&gt;<\/code> auf <code>1.2rem<\/code>. Das sind 120% der Basislinie.<\/p>\n<p>Der Hauptkopf auf unserer Seite muss viel gr\u00f6\u00dfer sein. Indem wir die Schriftgr\u00f6\u00dfe von <code>&lt;h1&gt;<\/code> auf <code>2.4rem<\/code> setzen, k\u00f6nnen wir die \u00dcberschrift 240% gr\u00f6\u00dfer als unsere Basislinie machen.<\/p>\n<p>Sie erhalten etwas in dieser Art:<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1133\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem.webp\" alt=\"Diagramm der Schriftgr\u00f6\u00dfen in REM-Einheiten. HTML bei 16px, h1 bei 2.4rem (38.4px) und body bei 1.2rem (19.2px) mit Beispieltext.\" class=\"wp-image-48911 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-300x212.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1024x725.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-768x544.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1536x1088.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-600x425.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1200x850.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-730x517.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1460x1034.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-784x555.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-1568x1110.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/02_font_sizing_in_rem-877x621.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1133;\" \/><\/figure>\n<h3 class=\"wp-block-heading\">Warum REM verwenden?<\/h3>\n<p>Welche Vorteile bietet dieses System?<\/p>\n<p>In CSS bieten REM-Einheiten einige ziemlich gute Vorteile:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Echte Konsistenz:<\/strong> Alles skaliert proportional basierend auf der Root-Gr\u00f6\u00dfe, sodass Ihr Design auf jedem Ger\u00e4t immer genau so aussieht, wie Sie es beabsichtigt haben.<\/li><li><strong>Reaktionsf\u00e4higkeit:<\/strong> Proportionales Skalieren bedeutet, dass Ihre Website oder App sich an eine breite Palette von Ger\u00e4ten anpassen kann.<\/li><li><strong>Einfache Wartung:<\/strong> Wenn alle Ihre Stile auf derselben Root-Einstellung basieren, ist es einfach, bei Bedarf umfassende \u00c4nderungen vorzunehmen \u2014 Sie m\u00fcssen nicht jedes einzelne Element besuchen und die Schriftgr\u00f6\u00dfe manuell \u00e4ndern. Dies spart Ihnen auch <em>viel<\/em> Zeit.<\/li><li><strong>Gro\u00dfartige Zug\u00e4nglichkeit:<\/strong> Tats\u00e4chlich \u00e4ndern <a href=\"https:\/\/medium.com\/@vamptvo\/pixels-vs-ems-users-do-change-font-size-5cfb20831773\" target=\"_blank\" rel=\"noreferrer noopener\">ziemlich viele Menschen<\/a> die Standard-Schriftgr\u00f6\u00dfe ihrer Browser, um Texte leichter lesbar zu machen. Durch die Verwendung von REM-Gr\u00f6\u00dfen kann sich Ihr Design an diese Benutzervorlieben anpassen.<\/li><\/ul>\n<p>Nat\u00fcrlich ist nicht alles Sonnenschein und Regenbogen. Es gibt einige Nachteile:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Drittanbieter-Wildcards:<\/strong> Wenn Ihre Website eingebettete Inhalte enth\u00e4lt, stellen Sie m\u00f6glicherweise fest, dass Text und andere Elemente Ihren REM-Regeln nicht folgen.<\/li><li><strong>Schwierige Berechnungen: <\/strong>Es erfordert etwas Mathematik, genau herauszufinden, wie gro\u00df 1,2rem sein wird.<\/li><li><strong>Gro\u00dfe Macht, gr\u00f6\u00dfere Verantwortung: <\/strong>Wenn Sie die Textgr\u00f6\u00dfe auf Ihrer Website so einfach \u00e4ndern k\u00f6nnen, m\u00fcssen Sie bei Bearbeitungen vorsichtig sein, um gestalterische Katastrophen auf der gesamten Website zu vermeiden!<\/li><\/ul>\n<p>Als allgemeine Regel gilt, <strong>REM sollte Ihre erste Wahl f\u00fcr die meisten Projekte sein<\/strong>. Es ist einfacher zu handhaben als EM-Gr\u00f6\u00dfen, und die Ergebnisse sind vorhersehbarer.<\/p>\n<p>Jedoch gibt es Zeiten, in denen EM n\u00fctzlich ist.<\/p>\n<h2 id=\"h2_getting-to-know-em\" class=\"wp-block-heading\">Erste Schritte mit EM<\/h2>\n<p>EM ist ein schwieriger Kunde. Diese Einheit basiert auf der Schriftgr\u00f6\u00dfe des \u00fcbergeordneten Elements \u2014 wie ein Cham\u00e4leon, das sich an seine Umgebung anpasst.<\/p>\n<p>Die Verwirrung beginnt, wenn Sie mit der Verschachtelung beginnen. Die meisten Elemente <a href=\"https:\/\/www.dreamhost.com\/blog\/install-wordpress-child-theme\/\" target=\"_blank\" rel=\"noreferrer noopener\">erben ihre Standard-Schriftgr\u00f6\u00dfe von ihrem Elternteil<\/a>. Aber was, wenn das Elternteil auch EM-Gr\u00f6\u00dfen verwendet? Sie k\u00f6nnten ziemlich leicht in ein verworrenes Durcheinander von Proportionalit\u00e4t geraten.<\/p>\n<p>Hier ist ein einfaches Beispiel:<\/p>\n<p>Angenommen, Sie haben eine Seite, die ein <code>&lt;div&gt;<\/code> enth\u00e4lt. In dieser Box befindet sich ein <code>&lt;p&gt;<\/code> Tag mit etwas Text.<\/p>\n<p><code>&lt;html&gt;<br>    &lt;div&gt;<br>        &lt;p&gt;Einige Texte hier.&lt;\/p&gt;<br>    &lt;\/div&gt;<br>&lt;\/html&gt;<\/code><\/p>\n<p>Sehen Sie sich jetzt das CSS f\u00fcr diesen HTML-Snippet an:<\/p>\n<p><code>html { font-size: 16px; \/* Ausgangsgr\u00f6\u00dfe *\/ }<br>div { font-size: 1.2em; \/* 19.2px *\/ }<br>p { font-size: 1.2em; \/* 23.04px *\/ }<\/code><\/p>\n<p>Wir haben damit begonnen, die Standard-Schriftgr\u00f6\u00dfe f\u00fcr die gesamte Seite zu definieren. Bis jetzt ist alles gut.<\/p>\n<p>Als N\u00e4chstes haben wir gesagt, dass der Inhalt von <code>&lt;div&gt;<\/code> <code>1.2em<\/code> sein sollte. Mit anderen Worten, unser Text sollte 120% des Standardwerts des \u00fcbergeordneten Elements sein.<\/p>\n<p>Zum Abschluss \u00e4ndern wir auch die <code>&lt;p&gt;<\/code><strong> <\/strong>Schriftgr\u00f6\u00dfe auf <code>1.2em<\/code>.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1133\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em.webp\" alt=\"Schriftgr\u00f6\u00dfen-Diagramm in EM-Einheiten, das verschachtelte Textelemente und ihre relativen Gr\u00f6\u00dfen basierend auf \u00fcbergeordneten Elementen zeigt.\" class=\"wp-image-48913 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-300x212.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1024x725.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-768x544.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1536x1088.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-600x425.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1200x850.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-730x517.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1460x1034.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-784x555.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-1568x1110.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/03_font_sizing_in_em-877x621.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1133;\" \/><\/figure>\n<p>Warte mal einen Moment! Es gibt eine deutliche Zunahme der Textgr\u00f6\u00dfe, gemessen in Pixeln.<\/p>\n<p>Warum ist das so?<\/p>\n<p>Das <code>&lt;p&gt;<\/code>-Element hat die Schriftgr\u00f6\u00dfe seines \u00fcbergeordneten <code>&lt;div&gt; (19.2px)<\/code> betrachtet und diese als Standard \u00fcbernommen. Und weil wir <code>1.2em<\/code> angefordert haben, erhalten wir Text, der 120% der Standardgr\u00f6\u00dfe ist.<\/p>\n<p>Diese Art von Fehlern passiert leicht, wenn man mit der EM-Einheit arbeitet.<\/p>\n<h3 class=\"wp-block-heading\">EM ist gro\u00dfartig f\u00fcr spezifische Gr\u00f6\u00dfenangaben<\/h3>\n<p>Abgesehen von den Nachteilen kann die EM-Einheit sehr n\u00fctzlich sein, um spezifische Komponenten zu dimensionieren.<\/p>\n<p>Angenommen, Sie m\u00f6chten eine Schaltfl\u00e4che erstellen, die immer ungef\u00e4hr denselben Platz innerhalb ihres \u00fcbergeordneten Elements einnimmt.<\/p>\n<p>Ihr HTML-Code k\u00f6nnte sein:<\/p>\n<p><code>&lt;button class='button'&gt;Klicken Sie mich&lt;\/button&gt;<\/code><\/p>\n<p>Um Ihren Button zu gestalten, k\u00f6nnten Sie EM-Einheiten f\u00fcr <code>font-size<\/code> und <code>padding<\/code> verwenden.<\/p>\n<p>Das CSS w\u00fcrde ungef\u00e4hr so aussehen:<\/p>\n<p><code>.button {<br>&nbsp;&nbsp;&nbsp;&nbsp;font-size: 1em; \/* Gr\u00f6\u00dfe relativ zur \u00fcbergeordneten Textgr\u00f6\u00dfe *\/<br>&nbsp;&nbsp;&nbsp;&nbsp;padding: 0.5em 1em; \/* Abstand skaliert mit der Schriftgr\u00f6\u00dfe *\/<br>}<\/code><\/p>\n<p>Der obige Code gibt uns einen einfachen Knopf mit ein wenig Polsterung um den Text.<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1600\" height=\"1133\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components.webp\" alt=\"EM-Gr\u00f6\u00dfenbestimmung f\u00fcr UI-Komponenten, die zeigt, dass die Schaltfl\u00e4chenpolsterung mit der Schriftgr\u00f6\u00dfe des \u00fcbergeordneten Elements skaliert, w\u00e4hrend sie gleichbleibende Proportionen beibeh\u00e4lt.\" class=\"wp-image-48915 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-300x212.webp 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1024x725.webp 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-768x544.webp 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1536x1088.webp 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-600x425.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1200x850.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-730x517.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1460x1034.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-784x555.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-1568x1110.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/04_em_sizing_for_specific_components-877x621.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1133;\" \/><\/figure>\n<p>Wenn die Schriftgr\u00f6\u00dfe des \u00fcbergeordneten Elements nach oben skaliert, folgen die Schriftgr\u00f6\u00dfe und das Polster des Buttons diesem.<\/p>\n<p>Auf diese Weise k\u00f6nnen Sie das gleiche visuelle Gleichgewicht zwischen den Elementen innerhalb des Elternteils beibehalten, auch wenn Sie Ger\u00e4te wechseln oder den Zoomfaktor \u00e4ndern.<\/p>\n<h3 class=\"wp-block-heading\">Warum EM verwenden?<\/h3>\n<p>Angesichts der ganzen Verwirrung, warum sollten Sie \u00fcberhaupt EM verwenden?<\/p>\n<p>Nun, es bringt einige Vorteile mit sich:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Kontextabh\u00e4ngige Skalierung:<\/strong> Elemente skalieren basierend auf der Gr\u00f6\u00dfe ihrer Eltern, was Ihnen eine nuanciertere Kontrolle \u00fcber die Gr\u00f6\u00dfenangaben in Ihrem Design erm\u00f6glicht.<\/li><li><strong>Komponentenbasiertes Design:<\/strong> EM-Einheiten eignen sich hervorragend f\u00fcr die Erstellung von eigenst\u00e4ndigen, wiederverwendbaren Komponenten, die die gleichen Proportionen beibehalten.<\/li><li><strong>Pr\u00e4zise Kontrolle:<\/strong> Sie k\u00f6nnen Gr\u00f6\u00dfen auf jeder Dokumentstrukturebene feinjustieren, ohne pauschale \u00c4nderungen vornehmen zu m\u00fcssen.<\/li><li><strong>Reaktionsf\u00e4higkeit:<\/strong> Wie bei REM erm\u00f6glichen EM-Einheiten, dass Ihr Design sich an verschiedene Bildschirmgr\u00f6\u00dfen und Benutzervorlieben <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/wie-sie-ihre-website-fur-mobile-gerate-optimieren\/\" target=\"_blank\" rel=\"noreferrer noopener\">anpasst<\/a>.<\/li><\/ul>\n<p>Wie wir gesehen haben, gibt es auch einige Nachteile:<\/p>\n<ul class=\"wp-block-list\"><li><strong>Kumulative Effekte<\/strong>: Verschachtelte Elemente k\u00f6nnen zu unerwarteten Gr\u00f6\u00dfen f\u00fchren, da sich EM-Werte aufsummieren.<\/li><li><strong>Wartungsherausforderungen<\/strong>: Das \u00c4ndern der Schriftgr\u00f6\u00dfe eines \u00fcbergeordneten Elements betrifft alle untergeordneten Elemente, was zu unbeabsichtigten Folgen f\u00fchren kann \u2014 wie riesiger Flie\u00dftext und winzige Titel.<\/li><li><strong>Komplexit\u00e4t bei gro\u00dfen Projekten<\/strong>: Mit dem Wachstum Ihres Projekts kann es schwierig werden, alle relativen Gr\u00f6\u00dfen im Blick zu behalten.<\/li><\/ul>\n<p>Zusammenfassend kann EM f\u00fcr komponentenbasierte Designs und wenn man eine pr\u00e4zise Kontrolle \u00fcber Elementbeziehungen ben\u00f6tigt, unglaublich n\u00fctzlich sein. Es ist flexibler als pixelbasierte Gr\u00f6\u00dfenangaben, erfordert jedoch sorgf\u00e4ltigere Planung als REM.<\/p>\n<h2 id=\"h-rem-or-em-which-should-you-use\" class=\"wp-block-heading\">REM oder EM: Welches sollten Sie verwenden?<\/h2>\n<p>Nun, das war eine Menge interessanter Informationen. Wenn Sie jedoch etwas erstellen, m\u00fcssen Sie nur wissen, welche CSS-Einheit verwendet werden soll.<\/p>\n<p>Hier ist unser Urteil:<\/p>\n<ul class=\"wp-block-list\"><li><strong>REM ist die bessere Wahl f\u00fcr die meisten Projekte<\/strong>, da es skalierbarer ist und eine bessere Kontrolle bietet.<\/li><li><strong>EM kann ein wertvolles Werkzeug f\u00fcr spezifische Szenarien<\/strong> sein, die verschachtelte Stile involvieren.<\/li><\/ul>\n<p>Es ist auch erw\u00e4hnenswert, dass sowohl REM als auch EM im Allgemeinen <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/zeit-fur-ein-website-redesign\/\" target=\"_blank\" rel=\"noreferrer noopener\">besser f\u00fcr modernes Design<\/a> sind als absolute Einheiten wie <code>px<\/code>.<\/p>\n<p>Sie sind auch praktischer f\u00fcr die Textgr\u00f6\u00dfenanpassung im Vergleich zu anderen relativen Einheiten, wie Viewport-Einheiten (<code>vh\/vw<\/code>) und Prozent (<strong>%<\/strong>).<\/p>\n<p><strong>Lassen Sie uns REM vs. EM aus der Vogelperspektive betrachten:<\/strong><\/p>\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><td><strong>Merkmale<\/strong><\/td><td><strong>REM<\/strong><\/td><td><strong>EM<\/strong><\/td><\/tr><tr><td>Vererbung<\/td><td>Konsistent mit dem Root-Element<\/td><td>Relativ zum \u00fcbergeordneten Element<\/td><\/tr><tr><td>Skalierbarkeit<\/td><td>Ausgezeichnet<\/td><td>Mehr begrenzt<\/td><\/tr><tr><td>Komplexit\u00e4t<\/td><td>Niedriger, aufgrund der Konsistenz<\/td><td>H\u00f6her, aufgrund der kontextuellen Gr\u00f6\u00dfenanpassung<\/td><\/tr><tr><td>Wartung<\/td><td>Einfach \u2014 \u00c4nderungen an der Wurzelgr\u00f6\u00dfe wirken sich aus<\/td><td>Kann bei verschachtelten Elementen schwieriger sein<\/td><\/tr><tr><td>Zug\u00e4nglichkeit<\/td><td>Funktioniert gut mit Benutzereinstellungen<\/td><td>K\u00f6nnte Anpassungen erfordern<\/td><\/tr><tr><td>Am besten f\u00fcr<\/td><td>Globaler Abstand und Layout<\/td><td>Komponentenspezifisches Skalieren<\/td><\/tr><\/tbody><\/table><\/figure>\n<h2 id=\"h2_rem-and-em-font-sizing-faqs\" class=\"wp-block-heading\">REM und EM: H\u00e4ufig gestellte Fragen zur Schriftgr\u00f6\u00dfenanpassung<\/h2>\n<p>Der Leitfaden sollte die meisten Unklarheiten zu diesen sehr \u00e4hnlichen Einheiten beseitigt haben.<\/p>\n<p>Aber wenn Sie noch Fragen haben, hier ist, was Sie wissen m\u00fcssen!<\/p>\n<h3 class=\"wp-block-heading\">Sollte ich REM oder EM f\u00fcr responsives Design verwenden?<\/h3>\n<p>REM ist im Allgemeinen die bessere Wahl f\u00fcr reaktionsf\u00e4hige Designs, da es Ihnen erm\u00f6glicht, konsistente und skalierbare Layouts zu erstellen, die sich an verschiedene Bildschirmgr\u00f6\u00dfen anpassen.<\/p>\n<p>Die einzige Ausnahme besteht darin, dass Sie diskrete Einheiten erstellen m\u00f6chten, bei denen alle Elemente dasselbe Gr\u00f6\u00dfenverh\u00e4ltnis beibehalten.<\/p>\n<h3 class=\"wp-block-heading\">Wie kann ich Komplexit\u00e4t vermeiden, wenn ich EM-Einheiten verwende?<\/h3>\n<p>Um die Komplexit\u00e4t mit EM-Einheiten zu vermeiden, versuchen Sie die Verschachtelung von Elementen zu begrenzen. Verwenden Sie REM f\u00fcr globale Gr\u00f6\u00dfen und EM f\u00fcr kleinere Anpassungen innerhalb spezifischer Komponenten.<\/p>\n<h3 class=\"wp-block-heading\">Gibt es eine empfohlene Basis-Schriftgr\u00f6\u00dfe f\u00fcr REM?<\/h3>\n<p>Obwohl es keine strikte Regel gibt, ist eine g\u00e4ngige Basis-Schriftgr\u00f6\u00dfe f\u00fcr REM <code>16px<\/code>. Sie k\u00f6nnen jedoch jeden Wert w\u00e4hlen, der Ihren Designpr\u00e4ferenzen und <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/machen-sie-ihre-website-barrierefrei\/\" target=\"_blank\" rel=\"noreferrer noopener\">Zug\u00e4nglichkeitsanforderungen<\/a> entspricht.<\/p>\n<h2 id=\"h2_dive-deeper-into-css\" class=\"wp-block-heading\">Tiefer in CSS eintauchen<\/h2>\n<p>M\u00f6chten Sie mehr \u00fcber digitales Design erfahren? Wir haben viele gro\u00dfartige Lernressourcen f\u00fcr CSS:<\/p>\n<ul class=\"wp-block-list\"><li><a href=\"https:\/\/www.dreamhost.com\/blog\/de\/css-transformation\/\" target=\"_blank\" rel=\"noreferrer noopener\">Das CSS Transform-Attribut kennenlernen<\/a><\/li><li><a href=\"https:\/\/www.dreamhost.com\/blog\/de\/tailwind-vs-bootstrap\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tailwind vs. Bootstrap: Welches CSS-Framework ben\u00f6tigen Sie?<\/a><\/li><li><a href=\"https:\/\/www.dreamhost.com\/blog\/de\/tailwind-css\/\" target=\"_blank\" rel=\"noreferrer noopener\">Ihr kompletter Leitfaden zu Tailwind CSS<\/a><\/li><li><a href=\"https:\/\/www.dreamhost.com\/blog\/de\/css-frameworks\/\" target=\"_blank\" rel=\"noreferrer noopener\">16 beliebte CSS-Frameworks, die Ihnen Zeit sparen (mit Stil)<\/a><\/li><li><a href=\"https:\/\/www.dreamhost.com\/blog\/de\/css-animation\/\" target=\"_blank\" rel=\"noreferrer noopener\">CSS-Animationen: Verbessern Sie Ihre Website mit diesen 17 Optionen<\/a><\/li><\/ul>\n<h2 id=\"h2_responsive-design-matters\" class=\"wp-block-heading\">Responsives Design ist wichtig<\/h2>\n<p>Die CSS-Einheit ist eine Komponente, die oft \u00fcbersehen wird, wie wir zu Beginn dieses Leitfadens erw\u00e4hnt haben.<\/p>\n<p>Allerdings ist es wichtig, \u00fcber die Details des Designs nachzudenken, wenn Sie eine Website oder App erstellen m\u00f6chten, die auf jedem Ger\u00e4t gut aussieht und f\u00fcr jeden Benutzer funktioniert.<\/p>\n<p>Die Debatte zwischen REM oder EM ist letztendlich nicht allzu wichtig \u2014 Das Wichtigste ist, dass Ihre Website zug\u00e4nglich, reaktionsf\u00e4hig und benutzerfreundlich ist!<\/p>\n<p>Denken Sie daran, dass eine sch\u00f6ne Oberfl\u00e4che nichts bedeutet, wenn Ihre Website oder App nicht geladen wird. Wenn es darum geht, Ihren Benutzern die beste Erfahrung zu bieten, ziehen Sie ein Upgrade Ihres Hostings mit DreamHost in Betracht.<\/p>\n<p>Wir bieten eine <strong>100% Verf\u00fcgbarkeitsgarantie<\/strong> bei allen unseren <a href=\"https:\/\/www.dreamhost.com\/de\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">Shared Hosting<\/a>-Pl\u00e4nen an, mit optimierten Servern und gro\u00dfartigen Sicherheitsfunktionen. <a href=\"https:\/\/www.dreamhost.com\/de\/hosting\/\" target=\"_blank\" rel=\"noreferrer noopener\">Melden Sie sich heute an<\/a>, um den Unterschied selbst zu sehen!<\/p>\n\n\n<div class=\"article-cta-shared article-cta-small article-cta--product\">\n\t<div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-dedicated-hosting-877x586.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/03\/product-cta-dedicated-hosting.webp 2x\"  \/><\/div>\n\n\t<a href='https:\/\/www.dreamhost.com\/hosting\/dedicated\/' class='link-top' target='_blank' rel='noopener noreferrer'>\n\t\t<span>Dedicated Hosting<\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\" width=\"15\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n\n\t<div class=\"content-btm\">\n\t\t<h2 class=\"h2--md\">\n\t\t\tUltimate in Power, Security, and Control\n\t\t<\/h2>\n\t\t<p class=\"p--md\">\n\t\t\tDedicated servers from DreamHost use the best hardware\r\nand software available to ensure your site is always up, and always fast.\n\t\t<\/p>\n\n\t\t        <a\n            href=\"https:\/\/www.dreamhost.com\/hosting\/dedicated\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            See More                    <\/a>\n\n\t<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Verwirrt \u00fcber REM und EM? Erfahren Sie den Unterschied zwischen diesen CSS-Einheiten in unserem super knappen Leitfaden.<\/p>\n","protected":false},"author":1075,"featured_media":48901,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-rem-vs-em-in-a-nutshell\",\"REM vs. EM im \u00dcberblick\"],[\"h2_understanding-rem-and-em\",\"Verst\u00e4ndnis von REM und EM\"],[\"h2_getting-to-know-rem\",\"REM kennenlernen\"],[\"h2_getting-to-know-em\",\"Erste Schritte mit EM\"],[\"h-rem-or-em-which-should-you-use\",\"REM oder EM: Welches sollten Sie verwenden?\"],[\"h2_rem-and-em-font-sizing-faqs\",\"REM und EM: H\u00e4ufig gestellte Fragen zur Schriftgr\u00f6\u00dfenanpassung\"],[\"h2_dive-deeper-into-css\",\"Tiefer in CSS eintauchen\"],[\"h2_responsive-design-matters\",\"Responsives Design ist wichtig\"]]","hide_toc":false,"footnotes":""},"categories":[14509],"tags":[],"class_list":["post-54730","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-webdesign-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>REM vs. EM: Wie Sie die richtige CSS-Einheit w\u00e4hlen - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"REM vs. EM: Wie Sie die richtige CSS-Einheit w\u00e4hlen\" \/>\n<meta property=\"og:description\" content=\"Verwirrt \u00fcber REM und EM? Erfahren Sie den Unterschied zwischen diesen CSS-Einheiten in unserem super knappen Leitfaden.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2024-08-26T14:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-07T14:06:19+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Jennifer Le\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jennifer Le\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"11 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"REM vs. EM: Wie Sie die richtige CSS-Einheit w\u00e4hlen - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/","og_locale":"en_US","og_type":"article","og_title":"REM vs. EM: Wie Sie die richtige CSS-Einheit w\u00e4hlen","og_description":"Verwirrt \u00fcber REM und EM? Erfahren Sie den Unterschied zwischen diesen CSS-Einheiten in unserem super knappen Leitfaden.","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2024-08-26T14:00:00+00:00","article_modified_time":"2025-01-07T14:06:19+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","type":"image\/webp"}],"author":"Jennifer Le","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Jennifer Le","Est. reading time":"11 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/"},"author":{"name":"Jennifer Le","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf"},"headline":"REM vs. EM: Wie Sie die richtige CSS-Einheit w\u00e4hlen","datePublished":"2024-08-26T14:00:00+00:00","dateModified":"2025-01-07T14:06:19+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/"},"wordCount":2065,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","articleSection":["Webdesign"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/","name":"REM vs. EM: Wie Sie die richtige CSS-Einheit w\u00e4hlen - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","datePublished":"2024-08-26T14:00:00+00:00","dateModified":"2025-01-07T14:06:19+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2024\/08\/1460x1095_blog_hero_rem_vs_em_in_css_which_one_should_i_use_.webp","width":1460,"height":1095,"caption":"REM vs. EM: How To Choose the Right CSS Unit"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/rem-vs-em\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"REM vs. EM: Wie Sie die richtige CSS-Einheit w\u00e4hlen"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/6e0e15f083b219af1ab8d25dcd595ddf","name":"Jennifer Le","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/05\/jennifer-le-dreamhost-150x150.jpeg","caption":"Jennifer Le"},"description":"Jennifer is Designer II at DreamHost and is responsible for branding, design, and UX\/UI. In her free time, she enjoys crafting, cooking, and camping. Follow Jennifer on LinkedIn: https:\/\/www.linkedin.com\/in\/nhijenniferle\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/jenniferle\/"}]}},"lang":"de","translations":{"de":54730,"en":48900,"es":48882,"pl":52124,"uk":54758,"pt":54800,"ru":54868,"fr":69547,"nl":69573,"it":72698},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54730","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1075"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=54730"}],"version-history":[{"count":3,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54730\/revisions"}],"predecessor-version":[{"id":59797,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/54730\/revisions\/59797"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/48901"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=54730"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=54730"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=54730"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}