Конвертер одиниць CSS

Конвертуйте значення між одиницями CSS (px, rem, em, %) з налаштовуваними базовими розмірами шрифту. Основна функція - таблиця конвертації одиниць, додаткова - конвертація CSS коду з урахуванням вкладеності.

16px(16px)

Базовий розмір шрифту (16px)

Введіть значення:

Одиниця виміру:

Округлення:

Таблиця конвертації

16.0000

rem

1.0000

100.0000

Таблиця передустановлених значень

Часто використовувані значення, автоматично конвертовані на основі базового розміру шрифту

px	rem	em	%
4px	0.2500rem	0.2500em	25.0000%
6px	0.3750rem	0.3750em	37.5000%
8px	0.5000rem	0.5000em	50.0000%
10px	0.6250rem	0.6250em	62.5000%
12px	0.7500rem	0.7500em	75.0000%
14px	0.8750rem	0.8750em	87.5000%
16px	1.0000rem	1.0000em	100.0000%
18px	1.1250rem	1.1250em	112.5000%
20px	1.2500rem	1.2500em	125.0000%
24px	1.5000rem	1.5000em	150.0000%
28px	1.7500rem	1.7500em	175.0000%
32px	2.0000rem	2.0000em	200.0000%
36px	2.2500rem	2.2500em	225.0000%
40px	2.5000rem	2.5000em	250.0000%
48px	3.0000rem	3.0000em	300.0000%
56px	3.5000rem	3.5000em	350.0000%
64px	4.0000rem	4.0000em	400.0000%
72px	4.5000rem	4.5000em	450.0000%
80px	5.0000rem	5.0000em	500.0000%
96px	6.0000rem	6.0000em	600.0000%

Онлайн конвертер одиниць CSS: px, rem, em та % — Повний посібник

У сучасній веб-розробці адаптивність та доступність інтерфейсів відіграють ключову роль. Наш CSS Unit Converter — це потужний інструмент для frontend-розробників та веб-дизайнерів, який автоматизує розрахунки розмірів шрифтів та відступів. Забудьте про калькулятор та ручні формули: конвертуйте px в rem, em або відсотки миттєво.

Як працює конвертер CSS?

Інструмент працює в двох режимах, закриваючи всі потреби верстальника: від перекладу одного значення до обробки цілих фрагментів коду.

Базовий розмір шрифту (Base Font Size)

Всі відносні одиниці (rem, em, %) залежать від базового розміру шрифту. За стандартом у браузерах це 16px, але в дизайн-системах часто використовуються 14px, 18px або 20px. Наш інструмент дозволяє задати будь-який базовий розмір та зберігає його в налаштуваннях вкладок. Ви можете створити окремі вкладки для різних проектів та перемикатися між ними без втрати контексту.

Миттєва конвертація (Unit Converter)

Просто введіть значення в будь-яке поле (наприклад, у пікселях), і калькулятор автоматично перерахує його в інші одиниці:

PX (Pixels): Абсолютна одиниця, точна та передбачувана.
REM (Root EM): Відносно кореневого елемента <html>. Стандарт для адаптивної типографіки.
EM: Відносно батьківського елемента. Ідеально для масштабованих компонентів.
% (Procents): Відсоткове співвідношення від базового розміру.

Конвертація CSS коду з урахуванням вкладеності

Унікальна функція нашого сервісу — режим CSS Code Converter. Вставте готовий CSS-код, виберіть напрямок конвертації (наприклад, з px в rem), і алгоритм переробить весь код. Інструмент враховує вкладеність селекторів та властивість font-size у батьків, щоб коректно розрахувати складні значення em.

PX vs REM vs EM: Що вибрати?

Розуміння різниці між одиницями виміру критично важливе для якісної верстки.

Чому варто використовувати REM замість PX?

Використання rem дозволяє користувачам масштабувати інтерфейс через налаштування браузера (наприклад, для слабозорих). Якщо сайт зверстаний жорстко в px, зміна розміру шрифту в браузері не вплине на верстку, що погіршує доступність (a11y).

Коли використовувати EM?

Одиниця em корисна для створення компонентів, де відступи (padding, margin) повинні залежати від розміру шрифту самого елемента. Однак з em потрібно бути обережним через ефект каскадного успадкування (compounding). Наш конвертер допомагає відстежувати ці залежності.

Переваги нашого інструменту

Мультизадачність: Система вкладок дозволяє працювати над кількома проектами одночасно, зберігаючи налаштування для кожного.
Збереження прогресу: Всі дані, включаючи активну вкладку та налаштування округлення, автоматично зберігаються в LocalStorage браузера. Ви не втратите дані при перезавантаженні сторінки.
Гнучкі налаштування: Виберіть точність округлення (кількість знаків після коми), щоб код відповідав стандартам вашої команди.