Die EM-Einheit in CSS verstehen

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

Was ist eine EM-Einheit?

em ist eine relative Maßeinheit, die sich auf die Schriftgröße des Elements bezieht, auf dem sie verwendet wird (in einigen Fällen die Schriftgröße des übergeordneten Elements).

Es handelt sich um eine relative Einheit, was bedeutet, dass sich alle Werte, die sie verwenden, ändern, wenn sich die Schriftgröße des Elements ändert.

1em bedeutet 1-mal die Element-Schriftgröße.

Wenn Sie die Schriftgröße des Elements mit 16px deklarieren

.element {
  font-size: 16px;
}

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

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

Die inhärente kaskadierende Natur von EMs ermöglicht es ihnen, sich automatisch an Änderungen der Schriftgröße eines übergeordneten Elements anzupassen. Dank dieser Anpassungsfähigkeit können Webentwickler die Textgrößen einer Website anpassen, indem sie nur eine (übergeordnete) Schriftgröße ändern.

Webentwickler und -designer verwenden EMs aufgrund ihrer Skalierbarkeit, Flexibilität und Mobilfreundlichkeit. Sie ermöglichen auch responsive Designs, da sich in EMs festgelegte Elemente nahtlos an unterschiedliche Bildschirmgrößen und -auflösungen anpassen.

Wo wird die EM-Einheit verwendet?

Die Schlüsselwerteinheiten em ermöglichen die Größenanpassung anhand einer anderen Schriftgröße als der des HTML-Elements. Der Hauptzweck von em-Einheiten sollte darin bestehen, Skalierbarkeit im Kontext eines bestimmten Designelements zu ermöglichen.

Sie können beispielsweise die Polsterung, den Rand und die Zeilenhöhe um Navigations- und Menüelemente herum so einstellen, dass em-Werte verwendet werden. Wenn Sie dann die Schriftgröße des Menüs ändern, wird der Abstand um die Menüelemente herum proportional skaliert, unabhängig vom Rest des Layouts.

Designkomponenten wie Menüelemente, Schaltflächen und Überschriften können ihre eigenen, explizit angegebenen Schriftgrößen haben. Wenn Sie diese Schriftgrößen ändern, möchten Sie, dass die gesamte Komponente proportional skaliert wird.

Allgemeine Eigenschaften, auf die diese Richtlinie angewendet wird, sind die Einstellungen margin, padding, width, height und line-height, wenn sie auf Elemente mit nicht standardmäßiger Schriftgröße angewendet werden.

Relative Einheiten vs. absolute Einheiten in CSS

Wir haben erwähnt, dass die Einheit em 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 über einen anderen Wert definiert. Dies sind zum Beispiel EM, REM, 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.

Und vergessen Sie nicht, dass jeder unterschiedliche Browsereinstellungen verwendet, entweder aufgrund persönlicher Vorlieben oder aufgrund von Zugänglichkeitsanforderungen.

EM-Schlüsselpunkte

• em-Einheiten basieren auf der Schriftgröße des Elements, auf dem sie verwendet werden.
• em-Einheiten können durch die Übernahme der Schriftgröße von jedem übergeordneten Element beeinflusst werden.
• Verwenden Sie em-Einheiten zur Größenanpassung, die je nach Schriftgröße eines anderen Elements als des Stammelements skaliert werden sollen.
• Verwenden Sie em nicht in mehrspaltigen Layoutbreiten – verwenden Sie stattdessen %.
• Verwenden Sie em nicht, wenn die Skalierung unvermeidlich dazu führen würde, dass ein Layoutelement beschädigt wird.

EM-Umrechnungstabellen

Die Geviertgröße beträgt in den folgenden Beispielen 16px

em in andere Einheiten umgewandelt:

	1em	10em	50em	100em
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 em:

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

Abschluss

em ist eine relative Einheit, mit der Sie die Schriftgröße eines Elements definieren können, und jeder andere Wert mit der Einheit em hängt von der Größe des Elements ab.