Wir zeigen dir den Unterschied zwischen der CSS-Einheit em und rem. Einfaches umrechnen von Pixel zu rem mit der entsprechenden Formel. Mit CSS 3 kam eine weitere Einheit für Schriftgrößen hinzu. Rem (Root em) verhält sich in der Größendefinition gleich wie die Einheit em, mit dem einzigen Unterschied, dass sie sich an dem Root-Element (html, body) orientiert.
Beispiel em
Überschrift
Hier hat der Container die Schriftgröße 2em und vererbt diese an die Überschrift H2. Da die H2 allerdings wieder mit 2em definiert ist, wird diese letztendlich 4em groß.
Beispiel rem
Überschrift
Im Gegensatz hierzu ist bei rem die Überschrift H2 auch letztendlich nur 2rem groß.
Umrechnung Pixel zu rem
Einfaches umrechnen von Pixel zu rem mit der entsprechenden Formel. Um die Pixelgröße für rem zu definieren muss man nur folgende Formel anwenden:
Pixel % 16 = rem
Demnach entsprechen 32px = 2rem. Diese Formel lässt sich auf das gesamte Layout anwenden.
Für die etwas schlechteren Kopfrechner gibt es auch Online-Konverter: https://pxtoem.com
Browsersupport für „rem“
Rem wird von allen modernen Browsern unterstützt, Browser wie z.B. der Internet Explorer 8 und ältere Browser können mit dieser Einheit jedoch nicht umgehen.
Fazit
Rem empfiehlt sich für den Einsatz bei responsiven Webseiten, da man durch die Modifikation der Schriftgröße des Root-Elements schnell das gesamte Layout anpassen kann. Hat man hingegen Pixelangaben definiert, so muss man jede Angabe manuell abändern.
rem als CSS-Einheit bringt ein großes Potential für die Umsetzung moderner Webdesigns
Adrian Weinschenk, Teamleiter UX/UI in Stuttgart
Beitrag kommentieren
Wir freuen uns auf Ihr Feedback!