Für die Umwandlung von PIXEL Einheiten (px) in REM Werte (rem) gibt hier eine kleine Umrechnungstabelle mit den gängigsten Werten. Die Schriftgröße (Font-Size) ist einer der wichtigsten Werte bei der Gestaltung einer Website.
Während man früher fast immer nur px (Pixel) für die Schriftgröße als absolute Einheit verwendet hat, gibt es inzwischen aber auch noch andere praktische relative Einheiten wie rem, em, % oder vh und vw (relative zum Viewport).
Während sich em und Prozent Angaben immer auf das Eltern HTML-Element beziehen, bezieht sich rem dagegen immer auf die Basis Font-Größe im HTML-Dokument. Die Einheit bleibt also immer relativ zum root-Element (nicht zum Elternelement). Das ist vor allem bei responsiven Ansichten ein großer Vorteil.
Die Umrechnung von Pixel zu REM bezieht sich dabei immer auf die Standardschriftgröße der Browser von 16 Pixeln.
html {
font-size: 100%;
}Anhand der Formel Pixelwert : 16 = rem-Wert werden die Angaben umgerechnet.
Damit enspricht 1rem = 16px, 2rem = 32px, 3rem = 48px usw.
PIXEL in REM konvertieren – Umrechnungstabelle
| Pixel | REM |
|---|---|
| 1px | 0.0625rem |
| 2px | 0.125rem |
| 3px | 0.1875rem |
| 4px | 0.25rem |
| 5px | 0.3125rem |
| 6px | 0.4375rem |
| 7px | 0.375rem |
| 8px | 0.5rem |
| 9px | 0.5625rem |
| 10px | 0.625rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 15px | 0.9375rem |
| 16px | 1rem |
| 17px | 1.063rem |
| 18px | 1.125rem |
| 19px | 1.188rem |
| 20px | 1.25rem |
| 22px | 1.375rem |
| 24px | 1.5rem |
| 26px | 1.625rem |
| 28px | 1.75rem |
| 30px | 1.875rem |
| 32px | 2rem |
| 34px | 2.125rem |
| 36px | 2.25rem |
| 38px | 2.375rem |
| 40px | 2.5rem |
| 42px | 2.625rem |
| 44px | 2.75rem |
| 46px | 2.875rem |
| 48px | 3rem |
| 50px | 3.125rem |
| 52px | 3.25rem |
| 54px | 3.375rem |
| 56px | 3.5rem |
| 58px | 3.625rem |
| 60px | 3.75rem |