PIXEL in REM konvertieren

Für die Umwandlung von PIXEL Einheiten (px) in REM Werte (rem) gibt hier eine kleine Umrechnungstabelle mit den gängisten 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

 

Schreibe einen Kommentar