Sie haben sich möglicherweise mit der Verwendung flexibler Maßeinheiten abgefunden, verstehen aber möglicherweise immer noch nicht vollständig, wann Sie rem und wann Sie em . Dieses Tutorial wird Ihnen helfen, es herauszufinden!

Sowohl em als auch rem sind flexible, skalierbare Einheiten, die vom Browser abhängig von den Schriftgrößeneinstellungen in Ihrem Design in Pixelwerte übersetzt werden. Wenn Sie einen Wert von 1em oder 1rem verwenden, kann dies im Browser als alles von 16px bis 160px oder einem anderen Wert übersetzt werden.

On the other hand px values are used by the browser wie er ist, also 1px wird immer genau so angezeigt 1px .

Probieren Sie den Schieberegler in diesem CodePen-Beispiel aus, um zu sehen, wie der Wert von rem und em Einheiten in verschiedene Pixelwerte übersetzt werden kann, während explizit px Einheiten in der Größe festgelegt bleiben:

Die große Frage

Mit em und rem Dies gibt uns Flexibilität in unseren Designs und die Möglichkeit, Elemente nach oben und unten zu skalieren, anstatt an festen Größen festzuhalten. Wir können diese Flexibilität nutzen, um unsere Designs während der Entwicklung einfacher anzupassen, reaktionsschneller zu machen und es Browsernutzern zu ermöglichen, den Gesamtumfang von Websites für maximale Lesbarkeit zu steuern.

Beide em und rem Einheiten bieten diese Flexibilität und arbeiten auf ähnliche Weise, also ist die große Frage, wann sollten wir em Werte und wann sollten wir rem Werte verwenden?

Entscheidender Unterschied

Der Unterschied zwischen em und rem Einheiten besteht darin, wie der Browser den px Wert bestimmt, in den sie übersetzt werden. Das Verständnis dieses Unterschieds ist der Schlüssel, um zu bestimmen, wann jede Einheit verwendet werden soll.

Wir beginnen damit, wie rem und em Einheiten von Grund auf funktionieren, um sicherzustellen, dass Sie jedes Detail kennen. Dann werden wir weitermachen, warum Sie em oder rem Einheiten verwenden sollten.

Schließlich werden wir uns die praktische Anwendung genau ansehen, auf welchen Elementen eines typischen Designs Sie jeden Gerätetyp verwenden sollten.

Wie Rem-Einheiten in Pixelwerte übersetzt werden

Bei Verwendung von rem -Einheiten hängt die Pixelgröße, in die sie übersetzt werden, von der Schriftgröße des Stammelements der Seite ab, d. H. vom html -Element. Diese Stammschriftgröße wird mit der Zahl multipliziert, die Sie mit Ihrer rem Einheit verwenden.

Bei einer Schriftgröße des Stammelements von 16px würde 10rem beispielsweise 160px entsprechen, dh 10 x 16 = 160.

Wie em-Einheiten in Pixelwerte übersetzt werden

Bei Verwendung von em Einheiten ist der Pixelwert, den Sie erhalten, eine Multiplikation der Schriftgröße des zu gestaltenden Elements.

For example, if a div has a font size of 18px10em would equate to 180px, i.e. 10 x 18 = 180.

Important to Know:

Es ist ein weit verbreitetes Missverständnis, dass em Einheiten relativ zur Schriftgröße des übergeordneten Elements sind. Tatsächlich sind sie gemäß der W3-Spezifikation relativ zur Schriftgröße „des Elements, für das sie verwendet werden“.

Übergeordnete Element Schriftgrößen können em Werte beeinflussen, aber wenn das passiert, ist es nur wegen der Vererbung. Schauen wir uns an, warum und wie das in Aktion funktioniert.

Die Auswirkung der Vererbung auf em-Einheiten

Das Arbeiten mit em Einheiten kann bei der Vererbung schwierig werden, da jedes Element automatisch die Schriftgröße seines übergeordneten Elements erbt. Der Effekt der Vererbung kann nur überschrieben werden, indem explizit eine Schriftgröße mit einer Einheit festgelegt wird, die keiner Vererbung unterliegt, z. B. px oder vw.

Die Schriftgröße des Elements, für das em -Einheiten verwendet werden, bestimmt deren Größe. Dieses Element hat jedoch möglicherweise eine Schriftgröße von seinem übergeordneten Element geerbt, das eine Schriftgröße von seinem übergeordneten Element geerbt hat, und so weiter. Als solches ist es möglich, dass jeder em Wert von der Schriftgröße eines seiner Eltern beeinflusst wird.

Schauen wir uns ein Beispiel an. Fühlen Sie sich frei, dies in CodePen selbst auszuprobieren, während wir es durchgehen. Verwenden Sie Chrome Developer Tools oder Firebug für Firefox, um die Pixelwerte zu überprüfen, in die unsere em Einheiten berechnet werden.

Beispiel für em-Vererbung

Wenn wir eine Seite mit einer Stammschriftgröße von 16px (normalerweise die Standardeinstellung) und einem untergeordneten div mit einer Auffüllung von 1.5emhaben, erbt dieses div die Schriftgröße von 16px vom Stammelement. Daher wird seine Auffüllung in 24px übersetzt, dh 1,5 x 16 = 24.

Was ist dann, wenn wir ein anderes div um das erste wickeln und seine font-size auf 1.25em setzen?

Unser Wrapper div erbt die Root-Schriftgröße von 16px und multipliziert diese mit seiner eigenen font-size Einstellung von 1.25em. Dies setzt das div auf eine Schriftgröße von 20px , dh 1,25 x 16 = 20.

Jetzt erbt unser ursprüngliches div nicht mehr direkt vom Stammelement, sondern es erbt eine Schriftgröße von 20px von seinem neuen übergeordneten div. Sein Auffüllwert von 1.5em entspricht jetzt 30px , dh 1,5 x 20 = 30.

Dieser Skalierungseffekt kann noch verstärkt werden, wenn wir unserem ursprünglichen div eine em -basierte Schriftgröße hinzufügen, sagen wir 1.2em .

Das div erbt die 20px Schriftgröße von seinem übergeordneten Element und multipliziert diese dann mit seiner eigenen 1.2em Einstellung, wodurch es eine neue Schriftgröße von 24px , dh 1,2 x 20 = 24.

Das 1.5em Padding auf unserem div ändert sich jetzt mit der neuen Schriftgröße wieder in der Größe, diesmal in 36px , dh 1,5 x 24 = 36.

Schließlich, um weiter zu veranschaulichen, dass em Einheiten relativ zur Schriftgröße des Elements sind, für das sie verwendet werden (nicht das übergeordnete Element), wollen wir sehen, was mit unserem Padding von passiert 1.5em wenn wir das div explizit auf eine Schriftgröße von 14px , ein Wert, der nicht vererbt werden kann.

Jetzt ist unser Padding auf 21px gesunken, dh 1,5 x 14 = 21. Es ist nicht von der Schriftgröße des übergeordneten Elements betroffen.

Bei all diesem Komplikationspotenzial können Sie sehen, warum es wichtig ist zu wissen, wie em Einheiten auf überschaubare Weise verwendet werden.

Die Auswirkung der Browsereinstellungen auf die Schriftgröße des HTML-Elements

Standardmäßig haben Browser normalerweise eine Schriftgröße von 16px, die jedoch vom Benutzer zwischen 9px und 72px geändert werden kann.

Wichtig zu wissen:

Das root html -Element erbt seine Schriftgröße von den Einstellungen im Browser, es sei denn, es wird mit einem explizit festgelegten festen Wert überschrieben.

Während also die Schriftgröße im html -Element rem -Werte direkt bestimmt, kann diese Schriftgröße zuerst von den Browsereinstellungen stammen.

Somit können Browser-Schriftgrößeneinstellungen den Wert jeder rem Einheit, die in einem Design verwendet wird, sowie jeder em Einheit über Vererbung beeinflussen.

Browser-Einstellungseffekt Wenn keine HTML-Schriftgröße festgelegt ist

Sofern nicht überschrieben, das html -Element Es erbt die Standardeinstellung für die Schriftgröße im Browser. Nehmen wir zum Beispiel eine Site, auf der keine font-size -Eigenschaft für das html -Element festgelegt ist.

Wenn ein Benutzer seinen Browser mit der Standardschriftgröße von 16px hat, beträgt die Stammschriftgröße 16px. In den Chrome Developer Tools können Sie sehen, was ein Element geerbt hat, indem Sie auf der Registerkarte Berechnet die Option Geerbte Eigenschaften anzeigen aktivieren.

In diesem Fall entspricht 10rem160px, dh 10 x 16 = 160.

Wenn der Benutzer die Schriftgröße seines Browsers auf 18px erhöht, wird die Stammschriftgröße zu 18px. Jetzt 10rem übersetzt in 180px, dh 10 x 18 = 180.

Browser-Einstellungseffekt mit Emulation der HTML-Schriftgröße

Wenn eine em basierte Schriftgröße auf der html Element, der Pixelwert, in den es übersetzt wird, ist ein Vielfaches der Browser-Schriftgrößeneinstellung.

Wenn beispielsweise das html -Element der Site eine font-size -Eigenschaft auf 1.25em , wäre die Stammschriftgröße das 1,25-fache der Browser-Schriftgrößeneinstellung.

Wenn die Browser-Schriftgröße auf 16px , würde die Root-Schriftgröße als 20px , dh 1,25 x 16 = 20 .

In diesem Fall wäre 10rem gleich 200px, dh 10 x 20 = 200.

Wenn die Schriftgröße des Browsers jedoch auf 20pxgesetzt wäre, würde die Stammschriftgröße stattdessen in 25px , d.h. 1,25 x 20 = 25.

Jetzt 10rem wäre gleich 250px, dh 10 x 25 = 250.

Zusammenfassung em vs. rem Unterschied

Worauf all das oben Genannte hinausläuft, ist Folgendes:

• Übersetzung von rem Einheiten zu Pixelwert wird durch die Schriftgröße des html Elements bestimmt. Diese Schriftgröße wird durch die Vererbung von der Browser-Schriftgrößeneinstellung beeinflusst, es sei denn, sie wird explizit mit einer Einheit überschrieben, die keiner Vererbung unterliegt.

• Die Übersetzung von em Einheiten in Pixelwerte wird durch die Schriftgröße des Elements bestimmt, für das sie verwendet werden. Diese Schriftgröße wird durch die Vererbung von übergeordneten Elementen beeinflusst, es sei denn, sie wird explizit mit einer Unit überschrieben, die keiner Vererbung unterliegt.

Warum Rem-Einheiten verwenden:

Die größte Leistung, die rem Einheiten bieten, besteht nicht nur darin, dass sie unabhängig von der Elementvererbung eine konsistente Größe bieten. Vielmehr geben sie uns die Möglichkeit, die Schriftgrößeneinstellungen des Benutzers jeden einzelnen Aspekt des Layouts einer Site zu beeinflussen, indem sie rem Einheiten verwenden, in denen wir verwendet haben px Einheiten.

Aus diesem Grund sollte der Hauptzweck der Verwendung von rem Einheiten darin bestehen, sicherzustellen, dass das Layout unabhängig von der Standardschriftgröße, auf die ein Benutzer seinen Browser eingestellt hat, an die Größe des darin enthaltenen Textes angepasst wird.

Eine Website kann zunächst mit Schwerpunkt auf der gängigsten Standard-Browser-Schriftgröße von 16px gestaltet werden.

Aber durch die Verwendung von rem Einheiten, wenn ein Benutzer seine Schriftgröße erhöht, wird die Integrität der das Layout bleibt erhalten und der Text wird nicht in einem starren Raum für kleineren Text zusammengedrückt.

Und wenn der Benutzer seine Schriftgröße verringert, wird das gesamte Layout verkleinert und er wird nicht mit einem winzigen Bruchstück Text in einem Ödland von Leerraum zurückgelassen.

Benutzer ändern die Schriftgrößeneinstellungen aus allen möglichen Gründen, von angespannter Sehkraft bis hin zur Auswahl optimaler Einstellungen für Geräte, die sich in Größe und Betrachtungsabstand erheblich unterscheiden können. Die Anpassung dieser Einstellungen ermöglicht eine viel bessere Benutzererfahrung.

Wichtig zu wissen:

Einige Designer verwenden rem basierte Layouts in Verbindung mit einer festen px Einheit font-size Einstellung auf dem html Element. Dies geschieht normalerweise, damit eine Änderung der Schriftgröße im html -Element das Design insgesamt nach oben oder unten skalieren kann.

Ich rate dringend davon ab, da es die Schriftgröße überschreibt, die das html -Element von den Browsereinstellungen des Benutzers erbt. Daher verhindert dies, dass die Einstellungen Auswirkungen haben, und entfernt die Fähigkeit des Benutzers, für die beste Anzeige zu optimieren.

Wenn Sie die Schriftgröße im html -Element ändern möchten, tun Sie dies mit einem em oder rem -Wert, da die Stammschriftgröße dann immer noch ein Vielfaches der Browser-Schriftgrößeneinstellung des Benutzers ist.

Auf diese Weise können Sie Ihr Design weiterhin nach oben oder unten skalieren, indem Sie die Schriftgröße Ihres html Elements ändern, aber Sie behalten die Wirkung der Benutzerbrowsereinstellungen bei.

Warum em-Einheiten verwenden

Der Schlüsselwert, den em Einheiten bieten, besteht darin, dass Größenwerte durch eine andere Schriftgröße als die des html Elements bestimmt werden können.

Aus diesem Grund sollte der Hauptzweck von em Einheiten darin bestehen, die Skalierbarkeit im Kontext eines bestimmten Designelements zu ermöglichen.

Sie können beispielsweise die paddingmargin und line-height um einen Navigationsmenüeintrag setzen, um em Werte zu verwenden.

Auf diese Weise, wenn Sie die Schriftgröße des Menüs ändern, wird der Abstand um die Menüpunkte proportional skaliert, unabhängig vom Rest des Layouts.

Im vorherigen Abschnitt über Vererbung haben Sie gesehen, wie schnell Sie den Überblick behalten em Einheiten kann außer Kontrolle geraten. Aus diesem Grund empfehle ich, em Einheiten nur zu verwenden, wenn Sie einen klaren Bedarf daran erkennen.

Praktische Anwendung

Es mag einige Debatten unter Webdesignern geben, und ich bin sicher, dass verschiedene Leute unterschiedliche bevorzugte Ansätze haben, aber meine Empfehlung lautet wie folgt.

Verwenden Sie em-Einheiten für:

Jede Größe, die abhängig von der Schriftgröße eines anderen Elements als dem Stamm skaliert werden soll.

Im Allgemeinen besteht der einzige Grund, warum Sie em Einheiten verwenden müssen, darin, ein Element zu skalieren, das keine standardmäßige Schriftgröße hat.

Gemäß unserem obigen Beispiel können Designkomponenten wie Menüelemente, Schaltflächen und Überschriften ihre eigenen explizit angegebenen Schriftgrößen haben. Wenn Sie diese Schriftgrößen ändern, soll die gesamte Komponente proportional skaliert werden.

Allgemeine Eigenschaften, für die diese Richtlinie gilt, sind marginpaddingwidthheight und line-height Einstellungen, bei Verwendung für Elemente mit nicht standardmäßiger Schriftgröße.

Ich empfehle, wenn Sie em -Einheiten verwenden, die Schriftgröße des Elements, für das sie verwendet werden, in rem -Einheiten festzulegen, um die Skalierbarkeit zu erhalten, aber Verwirrung bei der Vererbung zu vermeiden.

Verwenden Sie normalerweise keine em Einheiten für Schriftgrößen

Es ist durchaus üblich, em Einheiten für die Schriftgröße zu sehen, insbesondere in Überschriften, aber ich würde vorschlagen, dass Designs besser handhabbar sind, wenn rem Einheiten normalerweise für die Schriftgröße verwendet werden.

Der Grund, warum Überschriften oft em Einheiten verwenden, ist, dass sie eine bessere Wahl sind als px Einheiten, relativ zur regulären Textgröße. rem Einheiten können dieses Ziel jedoch gleichermaßen gut erreichen. Wenn eine Anpassung der Schriftgröße für das html -Element vorgenommen wird, werden auch die Überschriftengrößen weiterhin skaliert.

Versuchen Sie, die em Schriftgröße auf dem html Element in diesem CodePen zu ändern, um selbst zu sehen:

In den meisten Fällen möchten wir nicht, dass unsere Schriftgrößen basierend auf einem anderen Element als dem Stamm skaliert werden, mit nur wenigen Ausnahmen.

Ein Beispiel, in dem wir die em basierte Schriftgröße wünschen, könnte ein Dropdown-Menü sein, in dem wir den Text des Menüelements der zweiten Ebene abhängig von der Schriftgröße der ersten Ebene haben. Ein anderes Beispiel kann ein Schriftsymbol sein, das in einer Schaltfläche verwendet wird, wobei sich die Größe des Symbols auf die Textgröße der Schaltfläche beziehen sollte.

Allerdings haben die meisten Elemente in einem Webdesign diese Art von Anforderung nicht, daher sollten Sie im Allgemeinen rem Einheiten für die Schriftgröße verwenden, mit em Einheiten nur dort, wo sie speziell benötigt werden.

Verwenden Sie rem-Einheiten für:

Jede Größe, die aus den oben beschriebenen Gründen keine em Einheiten benötigt und die abhängig von den Einstellungen der Browserschriftgröße skaliert werden sollte.

Dies macht fast alles in einem Standarddesign aus, einschließlich der meisten Höhen, der meisten Breiten, der meisten Polster, der meisten Ränder, der Randbreiten, der meisten Schriftgrößen, der Schatten und im Grunde fast aller Teile Ihres Layouts.

Kurz gesagt, alles, was mit rem Einheiten skalierbar gemacht werden kann, sollte sein.

Tipp

Beim Erstellen von Layouts ist es oft einfacher, in Pixeln zu denken, aber in rem Einheiten auszugeben.

Sie können Pixel zu rem Berechnungen automatisch über einen Präprozessor wie Stylus / Sass / Less oder einen Postprozessor wie PostCSS mit dem PXtoRem Plugin.

Alternativ können Sie PXtoEM verwenden, um Ihre Konvertierungen manuell durchzuführen.

Verwenden Sie immer rem Medienabfragen

Wenn Sie rem -Einheiten verwenden, um ein einheitlich skalierbares Design zu erstellen, sollten Ihre Medienabfragen auch in rem -Einheiten vorliegen. Dadurch wird sichergestellt, dass Ihre Medienabfragen unabhängig von der Schriftgröße des Browsers eines Benutzers darauf reagieren und Ihr Layout anpassen.

Wenn ein Benutzer beispielsweise Text sehr hoch skaliert, muss Ihr Layout möglicherweise von zwei Spalten auf eine einzelne Spalte herunterrasten, genau wie auf einem kleineren mobilen Gerät.

Wenn Ihre Haltepunkte feste Pixelbreiten haben, können sie nur durch eine andere Ansichtsfenstergröße ausgelöst werden. Mit rem basierten Haltepunkten reagieren sie jedoch auch auf unterschiedliche Schriftgrößen.

Verwenden Sie em oder rem nicht für:

Mehrspaltige Layoutbreiten

Spaltenbreiten in einem Layout sollten typischerweise auf % basieren, damit sie fließend in unvorhersehbar große Ansichtsfenster passen.

Einzelne Spalten sollten jedoch immer noch rem Werte über eine max-width Einstellung enthalten.

Zum Beispiel:

.container { width: 100%; max-width: 75rem;}

Dies hält die Spalte flexibel und skalierbar, verhindert aber, dass sie zu breit wird, damit der Text darin bequem lesbar ist.

Wenn ein Element streng unskalierbar sein soll

In einem typischen Webdesign gibt es nicht viele Teile Ihres Layouts, die nicht auf Skalierbarkeit ausgelegt werden können. Gelegentlich werden Sie jedoch auf Elemente stoßen, die wirklich explizite feste Werte verwenden müssen, um eine Skalierung zu verhindern.

Die Voraussetzung für die Verwendung fester Größenwerte sollte sein, dass das betreffende Element, wenn es skaliert würde, brechen würde. Bevor Sie also versucht sind, diese px Einheiten herauszuholen, fragen Sie sich, ob die Verwendung eine absolute Notwendigkeit ist.

Einpacken

Lassen Sie uns kurz zusammenfassen, was wir behandelt haben:

• rem und em Einheiten werden vom Browser basierend auf den Schriftgrößen in Ihrem Design in Pixelwerte berechnet.
• em Einheiten basieren auf der Schriftgröße des Elements, für das sie verwendet werden.
• rem Einheiten basieren auf der Schriftgröße des html Elements.
• em Einheiten können durch Vererbung der Schriftgröße von jedem übergeordneten Element beeinflusst werden

• rem Einheiten können durch Vererbung der Schriftgröße von Browser-Schrifteinstellungen beeinflusst werden.

• Verwenden Sie em Einheiten für die Größenanpassung, die abhängig von der Schriftgröße eines anderen Elements als dem Stamm skaliert werden sollen.
• Verwenden Sie rem Einheiten für die Größenanpassung, die keine em Einheiten benötigt und die abhängig von den Einstellungen der Browserschriftgröße skaliert werden sollten.
• Verwenden Sie rem Einheiten, es sei denn, Sie sind sicher, dass Sie em Einheiten benötigen, einschließlich Schriftgrößen.
• Verwenden Sie rem Einheiten auf Medienabfragen
• Verwenden Sie nicht em oder rem in mehrspaltigen Layoutbreiten – verwenden Sie stattdessen %.
• Verwenden Sie em oder remnicht, wenn die Skalierung unvermeidlich zum Bruch eines Layoutelements führen würde.

Ich hoffe, Sie haben jetzt ein robustes und vollständiges Bild davon erstellt, wie em und rem Einheiten funktionieren, und dadurch wissen Sie, wie Sie sie am besten in Ihren Entwürfen nutzen können.

Ich empfehle Ihnen, die in diesem Tutorial enthaltenen Nutzungsrichtlinien selbst auszuprobieren und die vollständige Skalierbarkeit und Reaktionsfähigkeit der Layouts zu genießen, die Sie erstellen können.