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.
Beitrag kommentieren
Wir freuen uns auf Ihr Feedback!