Die REM-Einheit in CSS verstehen

In diesem Artikel besprechen wir den Zweck, die Vorteile und die Anwendungsfälle von REM-Einheiten (Root EM) im CSS-Layout.

Was ist eine REM-Einheit?

rem steht für root em, eine relative Maßeinheit, die sich auf die Schriftgröße des Stammelements eines Dokuments bezieht.

Es handelt sich um eine relative Einheit, was bedeutet, dass sich alle Werte, die sie verwenden, ändern, wenn sich die Schriftgröße des Stammelements ändert. Das Stammelement bezieht sich auf das html-Element.

1rem bedeutet 1-mal die Stammschriftgröße.

wenn Sie die Schriftgröße des Stammverzeichnisses auf 16px festlegen (das ist die Standardschriftgröße)

html {
  font-size: 16px;
}

dann interpretiert 1rem es als 16px, 2rem interpretiert es als 32px und so weiter.

Die Verwendung von rem (oder einem anderen relativen Längenwert) für die Schriftgröße ist aus Gründen der Barrierefreiheit ein Muss, da die Größe von px in einigen Browsern nicht angepasst wird, wenn die Browsereinstellungen geändert werden.

Manche Benutzer müssen beispielsweise aufgrund einer Sehbehinderung bis zu 400 % zoomen, um Ihren Text lesen zu können. Mit rem stellen Sie sicher, dass Ihr Text diese Anforderungen erfüllt, da die Schriftgröße relativ zur vom Benutzer gewählten Standardschriftgröße definiert wird.

Wo wird die Rem-Einheit verwendet?

Die Einheit rem sorgt für Flexibilität in unserem Design. Sie bietet eine großartige Möglichkeit, die Typografie und den Abstand der gesamten Site nach oben und unten zu ändern, indem Sie einfach die Schriftgröße an einer Stelle in einem Stammelement ändern.

Wir können diese Flexibilität nutzen, um die Anpassung unserer Designs während der Entwicklung zu vereinfachen, ihre Reaktionsfähigkeit zu verbessern und es Browserbenutzern zu ermöglichen, die Gesamtskalierung von Websites für maximale Lesbarkeit zu steuern.

Wir kommen daher zu dem Schluss, dass rem dort verwendet wird, wo wir Änderungen an einer ganzen Site vornehmen möchten, da wir damit die Schriftgröße nur an einer einzigen Stelle ändern können.

Relative Einheiten vs. absolute Einheiten in CSS

Wir haben erwähnt, dass die Einheit rem eine relative Einheit ist. Lassen Sie uns also tiefer in die CSS-Einheitentypen eintauchen, um zu verstehen, was relative und absolute Typen bedeuten.

Relative Einheiten

Relative Einheiten werden durch einen anderen Wert definiert. Dies sind zum Beispiel REM, EM, VW und VH

REM wird relativ definiert zu:

• die Schriftgröße des Stammelements(html) der Webseite
• die Schriftgröße der Browser-Darstellungseinstellungen des Benutzers (standardmäßig 16px), wenn sie nicht im Stammelement der Webseite angegeben ist

EM wird relativ definiert:

• die Schriftgröße des übergeordneten Elements, wenn es um die Eigenschaft „font-size“ geht.
• die Schriftgröße des Elements selbst, wenn wir mit anderen Eigenschaften wie der Höhe arbeiten.

VW steht für 1% Ansichtsfensterbreite. Das heißt, wenn Sie die Breiteneigenschaft als 10vw definieren, nimmt das Element 10% der verfügbaren Breite des Ansichtsfensters ein.

Diese relativen Längenwerte haben einen klaren Vorteil gegenüber den absoluten, denn sie können dazu beitragen, dass Ihre Website responsive wird. Das heißt, Ihre Website passt sich automatisch und auf vorhersehbare Weise an die Größe der verfügbaren Bildschirmgröße an.

Absolute Einheiten

Beispiele für absolute Längenwerte sind: px (das ist 1/96 Zoll), in (ein Zoll) oder cm (das sind 37.8px oder 25.2/64in).

Wenn Sie diese Einheiten verwenden, können Sie sicher sein, dass sie immer die gleiche Größe haben. Dies ist insbesondere dann nützlich, wenn Sie die genauen Abmessungen der Ausgabe kennen, was meistens bei Drucklayouts der Fall ist. Wenn dies jedoch nicht der Fall ist, wie beispielsweise bei den vielen verschiedenen Bildschirmgrößen, ist es nicht so nützlich.

REM-Zugänglichkeit

Google-Entwickler empfehlen, relative Einheiten für Schriftgrößen zu verwenden

Durch die Verwendung von rem respektieren Sie die Entscheidungen der Benutzer hinsichtlich der Art und Weise, wie sie im Internet surfen möchten.

REM-Schlüsselpunkte

• rem-Einheiten werden vom Browser basierend auf den Schriftgrößen in Ihrem Design in Pixelwerte umgerechnet.
• rem-Einheiten basieren auf der Schriftgröße des HTML-Elements.
• rem-Einheiten können durch die Übernahme der Schriftgröße aus den Schrifteinstellungen des Browsers beeinflusst werden.
• Verwenden Sie rem-Einheiten, die je nach Schriftgrößeneinstellungen des Browsers skaliert werden sollten.
• Verwenden Sie rem-Einheiten bei Medienabfragen.

REM-Konvertierungstabellen

Die Rem-Größe beträgt in den folgenden Beispielen 16px

rem in andere Einheiten umgerechnet:

	1rem	10rem	50rem	100rem
px	16px	160px	800px	1600px
pt	12pt	120pt	600pt	1200pt
in	0.167in	1.667in	8.333in	16.667in
pc	1pc	10pc	50pc	100pc
cm	0.423cm	4.233cm	21.167cm	42.333cm
mm	4.233mm	42.333mm	211.667mm	423.333mm

Verschiedene Einheiten, umgerechnet in rem:

	1	10	50	100
px	0.063rem	0.625rem	3.125rem	6.25rem
pt	0.083rem	0.833rem	4.167rem	8.333rem
in	6rem	60rem	300rem	600rem
pc	1rem	10rem	50rem	100rem
cm	2.362rem	23.622rem	118.11rem	236.22rem
mm	0.236rem	2.362rem	11.811rem	23.622rem

Abschluss

rem ist eine relative Einheit, mit der Sie eine globale Schriftgröße definieren können. Jeder andere Wert mit der Einheit rem hängt von der globalen Größe ab. Wenn der Benutzer seine standardmäßige Stammschriftgröße ändert, werden die Werte der Einheit rem ebenfalls entsprechend skaliert. Bei festen Werten werden die Benutzereinstellungen ignoriert.