Wie konvertiert man PX in REM und umgekehrt?

In der Webentwicklung werden häufig relative Maßeinheiten wie REM anstelle von absoluten PX verwendet. Dies hilft, das Layout anpassungsfähig und benutzerfreundlich zu gestalten. Früher haben wir einen detaillierteren Beitrag darüber gemacht, wie sich px von rem unterscheidet. Jetzt betrachten wir ein Beispiel zur Umrechnung dieser Maßeinheiten.

PX vs REM

• PX (Pixel) — eine absolute Maßeinheit, die sich nicht je nach Browsereinstellungen ändert.
• REM (Root EM) — eine relative Einheit, die von der Schriftgröße des Wurzelelements (html) abhängt. Standardmäßig ist in den meisten Browsern 1rem = 16px.

Wie man PX in REM umrechnet

Um PX in REM umzuwandeln, muss man den Wert in PX durch die Basis-Schriftgröße (16px, wenn nicht geändert) teilen.

Formel

REM = PX / 16

Beispielcode in JavaScript

function pxToRem(px, base = 16) {
  return px / base + "rem";
}

console.log(pxToRem(32)); // "2rem"
console.log(pxToRem(20, 20)); // "1rem" (wenn die Basisgröße 20px ist)

Wie man REM in PX umrechnet

Um REM in PX umzuwandeln, muss man den Wert REM mit der Basis-Schriftgröße multiplizieren.

Formel

PX = REM × 16

Beispielcode in JavaScript

function remToPx(rem, base = 16) {
  return rem * base + "px";
}

console.log(remToPx(2)); // "32px"
console.log(remToPx(1.5, 18)); // "27px" (wenn die Basisgröße 18px ist)

Die Verwendung von REM anstelle von PX hilft, die Website anpassungsfähiger und zugänglicher zu gestalten. Die Umrechnung zwischen diesen Einheiten ist recht einfach und kann leicht mit Formeln oder einem kleinen JavaScript-Skript umgesetzt werden.