Як перевести px у rem, em і відсотки

Навіщо міняти одиницю

Пікселі точні, і в цьому ж їхня межа. Верстка, замкнена в px, не йде за розміром шрифту, який читач задав у браузері. rem рахується від кореневого шрифту, тож текст і відступи можуть масштабуватися разом. em рахується від шрифту самого елемента: це зручно всередині компонента і легко ламається, коли правила вкладені.

Конвертер одиниць CSS закриває обидві задачі: одне число одразу в px, rem, em і %, і цілий блок CSS з однієї одиниці в іншу. Базовий розмір шрифту задаєте ви. Звичайне значення браузера — 16px.

Крок за кроком

Відкрийте конвертер одиниць CSS. Перша вкладка називається за базою, 16px. Кнопки 16px, 14px, 18px і 20px змінюють цю базу. Якщо в дизайн-системі інше число, впишіть його в поле.
Лишіться в режимі «Конвертер одиниць». Введіть значення і виберіть одиницю. За бази 16px число 24 у px дає 24px, 1.5rem, 1.5em і 150%. Округлення стоїть на 4 знаках, тому картки показують 1.5000rem. У кожної картки своя кнопка «Копіювати».

Конвертер одиниць: база 16px, введення 24px, результат 24px, 1.5rem, 1.5em і 150%
У цьому режимі і rem, і em діляться на задану базу. Батьківське правило тут не читається. Це робить наступний режим.
Відкрийте «Конвертер CSS коду». Лишіть «З» на px і «У» на rem і вставте блок картки з наступного розділу. За бази 16px на виході буде 1rem, 1.5rem, 0.5rem, 1.25rem і 0.75rem.

Конвертер CSS-коду переводить блок із px у rem, зверху жовте попередження про вкладеність
Скопіюйте результат і перевірте його. Жовта плашка на сторінці не для вигляду: медіазапити і селектори, які інструмент не розібрав, можуть лишитися хибними.

Блок зі знімка

.card {
  font-size: 16px;
  padding: 24px;
  margin: 8px;
}
.card .title {
  font-size: 20px;
  margin-bottom: 12px;
}

Відступ 24px стає 1.5rem. Заголовок у 20px стає 1.25rem. Поле 8px стає 0.5rem, а 12px — 0.75rem.

Поради

Спершу задайте базу. 24px дорівнюють 1.5rem лише за бази 16px. За 18px ті самі 24px стануть 1.3333rem.
Тримайте вкладку на проєкт. «Додати таб» зберігає іншу базу. Вкладки, режим і округлення лишаються в local storage браузера.
Беріть rem для тексту, який має слухатися читача. Відступи, які теж ідуть від кореня, логічно писати в rem.
Беріть em, коли відступ належить компоненту. У конвертері коду em дивиться на font-size, який інструмент бачить у цього правила. У таблиці одиниць em просто бере базу.
Не женіть величезну таблицю стилів наосліп. Конвертуйте компонент, прочитайте вихід і лише тоді вставляйте його назад.

Поширені запитання

Яку базу ставити?

16px, якщо макет не каже інакше. Це звичайне значення браузера. Кнопки закривають 14px, 18px і 20px.

Чому в таблиці rem і em збіглися?

Таблиця переводить обидві одиниці від бази, яку ви ввели. Батьківський селектор вона не дивиться. Вкладений em рахується в «Конвертері CSS коду».

24px завжди дорівнює 1.5rem?

Лише за бази 16px. Змініть базу — чотири картки перерахуються одразу.

Будь-яка таблиця стилів перекладеться чисто?

Ні. Конвертер попереджає, що складні селектори, медіазапити і частина вкладеності можуть вийти хибно. Прочитайте результат, перш ніж відправляти його в проєкт.

Інші інструменти

Конвертер одиниць CSS: інструмент із цього гайда.
SVG у CSS: покласти SVG-іконку в правило background.
Favicon Generator: зібрати іконки сайту з однієї картинки.
Веб-інструменти: решта сервісів категорії.

Спробувати

Відкрийте конвертер одиниць CSS, лишіть базу 16px і введіть 24.