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 geschrieben, 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 entspricht in den meisten Browsern1rem = 16px.
Wie man PX in REM umwandelt
Um PX in REM umzuwandeln, muss man den Wert in PX durch die Basis-Schriftgröße (16px, falls 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 umwandelt
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 ziemlich einfach und kann leicht mit Formeln oder einem kleinen JavaScript-Skript umgesetzt werden.