У веб-розробці часто використовуються відносні одиниці виміру, такі як REM, замість абсолютних PX. Це допомагає зробити макет адаптивним і зручним для користувачів.
Раніше ми робили більш детальний допис про те чим відрізняється px від rem. Зараз розглянемо приклад конвертації цих одиниць виміру.
PX vs REM
- PX (пікселі) — абсолютна одиниця виміру, яка не змінюється залежно від налаштувань браузера.
-
REM (Root EM) — відносна одиниця, яка залежить від розміру шрифту кореневого елемента (
html). За замовчуванням у більшості браузерів1rem = 16px.
Як конвертувати PX у REM
Щоб перевести PX у REM, потрібно поділити значення в PX на базовий розмір шрифту (16px, якщо не змінено).
Формула
REM = PX / 16
Приклад коду на JavaScript
function pxToRem(px, base = 16) {
return px / base + "rem";
}
console.log(pxToRem(32)); // "2rem"
console.log(pxToRem(20, 20)); // "1rem" (якщо базовий розмір 20px)
Як конвертувати REM у PX
Щоб перевести REM у PX, потрібно помножити значення REM на базовий розмір шрифту.
Формула
PX = REM × 16
Приклад коду на JavaScript
function remToPx(rem, base = 16) {
return rem * base + "px";
}
console.log(remToPx(2)); // "32px"
console.log(remToPx(1.5, 18)); // "27px" (якщо базовий розмір 18px)
Використання REM замість PX допомагає зробити сайт більш адаптивним та доступним. Конвертація між цими одиницями доволі проста, і її можна легко реалізувати за допомогою формул або невеликого скрипта на JavaScript.