Ta treść została automatycznie przetłumaczona z ukraińskiego.
W web development często używa się względnych jednostek miary, takich jak REM, zamiast absolutnych PX. Pomaga to uczynić układ responsywnym i wygodnym dla użytkowników.
Wcześniej pisaliśmy bardziej szczegółowy post na temat czym różni się px od rem. Teraz rozważymy przykład konwersji tych jednostek miary.
PX vs REM
- PX (piksele) — absolutna jednostka miary, która nie zmienia się w zależności od ustawień przeglądarki.
-
REM (Root EM) — względna jednostka, która zależy od rozmiaru czcionki elementu root (
html). Domyślnie w większości przeglądarek1rem = 16px.
Jak konwertować PX na REM
Aby przeliczyć PX na REM, należy podzielić wartość w PX przez podstawowy rozmiar czcionki (16px, jeśli nie zmieniono).
Formuła
REM = PX / 16
Przykład kodu w JavaScript
function pxToRem(px, base = 16) {
return px / base + "rem";
}
console.log(pxToRem(32)); // "2rem"
console.log(pxToRem(20, 20)); // "1rem" (jeśli podstawowy rozmiar 20px)
Jak konwertować REM na PX
Aby przeliczyć REM na PX, należy pomnożyć wartość REM przez podstawowy rozmiar czcionki.
Formuła
PX = REM × 16
Przykład kodu w JavaScript
function remToPx(rem, base = 16) {
return rem * base + "px";
}
console.log(remToPx(2)); // "32px"
console.log(remToPx(1.5, 18)); // "27px" (jeśli podstawowy rozmiar 18px)
Używanie REM zamiast PX pomaga uczynić stronę bardziej responsywną i dostępną. Konwersja między tymi jednostkami jest dość prosta i można ją łatwo zrealizować za pomocą formuł lub małego skryptu w JavaScript.