Network Tools

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

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

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

16px(16px)

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

px
16.0000
rem
1.0000
em
1.0000
%
100.0000

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

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

pxremem%
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 браузера. Ви не втратите дані при перезавантаженні сторінки.
  • Гнучкі налаштування: Виберіть точність округлення (кількість знаків після коми), щоб код відповідав стандартам вашої команди.

Other Developer Tools

🔐

Base64 Encoder/Decoder

Кодування та декодування Base64

🎫

JWT Decoder

Декодування JWT токенів

🔑

Hash Generator

Генерація хешів (MD5, SHA-1, SHA-256)

🔎

Regex Tester

Перевірка регулярних виразів

🆔

UUID Generator

Генерація UUID v4

🔗

URL Encoder/Decoder

Кодування та декодування URL

🔤

HTML Entity Encoder/Decoder

Кодування та декодування HTML сутностей

📊

CSV/JSON/XML Converter

Конвертація між форматами CSV, JSON та XML

📄

Formatter/Validator

Форматування та валідація JSON, XML, CSV

💻

slug-generator

💻

bcrypt-generator

Дослідіть інші категорії

🖼️

Image Tools

All image processing tools: converter, resizer, and cropper

18 tools
📝

Text Tools

Text processing and manipulation tools

5 tools
🌐

Web Tools

Web development tools: Favicon Generator, CSS Unit Converter, SVG to Image

3 tools
🌐

Network Tools

Network utilities: Subnet Calculator, DNS Lookup

2 tools

Вступ

CSS Unit Converter допомагає переводити значення між CSS-одиницями: px, rem, em, %, vw, vh та іншими. Такий інструмент особливо корисний у фронтенд-розробці, адаптивному дизайні, типографіці та системах відступів, де один і той самий розмір може бути потрібен у різних форматах залежно від контексту.

Наприклад, дизайнер передав розмір у пікселях, а у вашому проєкті прийнято використовувати rem, щоб інтерфейс краще масштабувався. Або потрібно перевести ширину в vw, щоб блок реагував на розмір екрана. Замість ручних розрахунків конвертер одразу показує точний результат і допомагає уникнути помилок.

Інструмент також корисний під час рефакторингу старого CSS, переходу від фіксованої верстки до адаптивної та побудови design tokens. Крім того, він спрощує комунікацію між дизайнерами й розробниками, які часто звикли працювати в різних одиницях.

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

1. Введіть числове значення й оберіть вихідну одиницю, наприклад px або rem. 2. За потреби вкажіть базове значення, наприклад root font size для rem. 3. Скопіюйте готовий результат у свій CSS.

Приклади

  • Ввід: 16px, база 16px

Вивід: 1rem

  • Ввід: 24px, база 16px

Вивід: 1.5rem

  • Ввід: 50vw при ширині viewport 1200px

Вивід: 600px

Поради

  • Перед переведенням між px, rem і em завжди уточнюйте базовий розмір шрифту.
  • Для масштабованої типографіки rem часто зручніший за фіксовані пікселі.
  • vh і vw варто обережно використовувати на мобільних пристроях.

FAQ

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

rem залежить від розміру шрифту кореневого елемента, а em — від поточного елемента.

Навіщо переводити px у rem?

Тому що rem краще підходить для масштабування, доступності та узгоджених дизайн-систем.

Чи завжди viewport-одиниці працюють однаково?

Ні. На мобільних пристроях висота видимої області може змінюватися через панелі браузера.