Question 1

Was ist der Unterschied zwischen px, rem und em?

Accepted Answer

px (Pixel) ist eine absolute Einheit. rem (Root em) ist relativ zur Schriftgrösse des Root-Elements (meist 16px). em ist relativ zur Schriftgrösse des Eltern-Elements. rem ist stabiler als em, da es immer auf das Root-Element bezogen ist.

Question 2

Warum sollte ich rem statt px verwenden?

Accepted Answer

rem-Werte skalieren automatisch mit der Browsereinstellung des Nutzers. Wenn jemand die Schriftgrösse im Browser auf 20px erhöht, wächst alles in rem proportional mit. Das verbessert die Barrierefreiheit erheblich.

Question 3

Was ist die Standard-Root-Schriftgrösse?

Accepted Answer

Die Standard-Schriftgrösse in den meisten Browsern ist 16px. Das bedeutet: 1rem = 16px. Du kannst aber im CSS mit html { font-size: 62.5%; } auf 10px wechseln — dann ist 1rem = 10px (einfachere Rechnung).

Question 4

Was ist der Unterschied zwischen rem und em?

Accepted Answer

rem bezieht sich immer auf die Root-Schriftgrösse (html-Element). em bezieht sich auf die Schriftgrösse des direkten Eltern-Elements. rem ist daher vorhersehbarer und wird für Layout-Abstände empfohlen, em für komponenteninterne Skalierung.

Question 5

Wann soll ich px, wann rem verwenden?

Accepted Answer

Nutze px für Borders, Box-Shadows und andere Details die nicht skalieren sollen. Nutze rem für Schriftgrössen, Abstände (margin, padding), max-width und andere Layout-Grössen — für bessere Zugänglichkeit und skalierbare Designs.

Pixel/REM-Konverter

Root-Schriftgrösse (html)

Wert eingeben (beliebiges Feld)

Schnellreferenz (16px Basis)

CSS-Einheiten verstehen

px → rem Formel

px → pt Formel

Häufig gestellte Fragen

Was ist der Unterschied zwischen px, rem und em?

Warum sollte ich rem statt px verwenden?

Was ist die Standard-Root-Schriftgrösse?

Was ist der Unterschied zwischen rem und em?

Wann soll ich px, wann rem verwenden?