DevToolPal
UK

Одиниці CSS

px → rem: конвертер

Переведення величин: пікселі (px) → rem (rem). 1 px = 0,0625 rem, а 1 rem = 16 px.

Формула

rem = px ÷ 16

Як перевести

Щоб перевести px у rem, поділіть значення на 16. Наприклад, 32 px = 2 rem.

Таблиця переведення

px rem
1 px 0,0625 rem
2 px 0,125 rem
4 px 0,25 rem
8 px 0,5 rem
10 px 0,625 rem
12 px 0,75 rem
14 px 0,875 rem
16 px 1 rem
18 px 1,125 rem
20 px 1,25 rem
24 px 1,5 rem
32 px 2 rem
48 px 3 rem
64 px 4 rem

Таблицю розраховано для: базовий розмір шрифту 16px. Змініть налаштування в конвертері вище під свій проєкт.

Про ці одиниці

Браузери переводять будь-яку довжину CSS у пікселі. rem залежить від розміру шрифту кореневого елемента, em — від розміру шрифту батьківського; в основних браузерах обидва дорівнюють 16px, якщо сторінка чи користувач їх не змінили. 1pt — це 1/72 дюйма, 1px — 1/96 дюйма, отже 1pt = 1,333px. vw — 1 % ширини вʼюпорту, тому його розмір у пікселях залежить від екрана.

Часті запитання

› Як перевести px у rem?

1 px = 0,0625 rem. Щоб перевести, поділіть значення на 16: 32 px = 2 rem.

› Скільки px в 1 rem?

1 rem = 16 px. Зворотна формула: px = rem × 16.

› Навіщо використовувати rem замість px?

Розміри в rem слідують за налаштуванням розміру шрифту в браузері користувача, що важливо для доступності, а зміна одного кореневого значення узгоджено масштабує весь макет.

› Чим rem відрізняється від em?

rem завжди бере розмір шрифту кореневого елемента (html). em бере розмір шрифту батьківського елемента, тому вкладені значення em перемножуються.