Конвертер PX у REM

Що вміє інструмент

Інструмент перетворює довжини CSS між пікселями та відносними одиницями rem і em. Введіть одне значення, наприклад 24px, і отримаєте 1.5rem; перелічіть кілька значень по одному в рядку, щоб перетворити їх разом; або вставте цілу таблицю стилів — усі значення px у ній буде замінено на місці. Довідкова таблиця показує поширені розміри від 1px до 128px за вашого базового розміру. Нічого не залишає браузер.

Як користуватися

1. Вставте CSS або введіть значення по одному в рядку. Числа без одиниць вважаються px (або rem/em за зворотного напрямку), а значення в іншій одиниці перетворюється у зворотний бік.
2. Задайте Базовий розмір шрифту. У всіх браузерах типово 16px; у деяких проєктах пишуть html { font-size: 62.5% }, щоб 1rem = 10px.
3. Виберіть Напрямок (px → rem або rem → px), Одиницю (rem або em) і кількість Знаків після коми.
4. За потреби задайте Залишати в px значення, менші за, щоб рамки 1px та інші тонкі лінії залишилися в px.
5. Скопіюйте результат кнопкою над ним.

Приклад

/* before */
.title { font-size: 24px; margin-bottom: 12px; }

/* after (base 16px) */
.title { font-size: 1.5rem; margin-bottom: 0.75rem; }

Значення не в px — відсотки, кольори, імена файлів у url() і класи на кшталт .mt-16px — не змінюються. 0px перетворюється на 0.

px, rem і em

• px — абсолютна одиниця, яка не враховує бажаний розмір шрифту читача.
• rem («root em») — кратне розміру шрифту елемента html. Якщо читач виставить у браузері 20px, 1rem стане 20px, і вся верстка масштабується.
• em — кратне розміру шрифту поточного елемента. Зручно для відступів, що мають іти за своїм текстом, але вкладені em перемножуються, тож rem надійніший як типовий варіант.

Медіазапити теж перетворюються: @media (min-width: 768px) стає 48rem (або 48em), і точки зламу залишаються узгодженими, коли читач збільшує текст. У медіазапитах rem і em відраховуються від типового розміру шрифту браузера, а не від вашого правила для html.