Як конвертувати PX у REM та навпаки?

CSS, Веб-розробка · 8-2-2025

У веб-розробці часто використовуються відносні одиниці виміру, такі як 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.