CSS: Der Unterschied zwischen rem und em

4/5 (1)

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

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:
http://pxtoem.com/

Support

Rem wird von allen modernen Browsern unterstützt, Browser wie z.B. der Internet Explorer 8 und ältere können mit dieser Einheit nicht umgehen.

Fazit

Rem empfiehlt sich für den Einsatz bei responsiven Webseiten, da man durch Modifizieren der Schriftgröße des Root-Elements schnell das gesamte Layout anpassen kann.
Hat man hingegen Pixelangaben definiert, muss man jede Angabe manuell abändern.