Конвертер CSS-одиниць
⚙️ Базові налаштування
За замовчуванням: 16px (налаштування браузера)
Для розрахунків em
Для розрахунків %
🔄 Конвертер одиниць
Абсолютна одиниця — фіксований розмір незалежно від налаштувань
Відносно розміру шрифту кореня (html)
Відносно розміру шрифту батьківського елемента
Відносно ширини/розміру шрифту батьківського елемента
Одиниця друку: 1pt = 1/72 дюйма
1vw = 1% ширини viewport (за замовчуванням 1920px)
📊 Таблиця швидких перетворень
| PX | REM | EM | % | PT | Типове використання |
|---|
💡 Найкращі практики
👍 Використовуйте REM для:
- • Розмірів шрифту (масштабується з налаштуваннями користувача)
- • Padding і margin (сталі відступи)
- • Breakpoint у media query
- • Розмірів компонентів
👍 Використовуйте EM для:
- • Padding кнопок (масштабується з шрифтом)
- • Висоти рядка (line-height)
- • Розміру іконок відносно тексту
- • Типографічних відступів
👍 Використовуйте PX для:
- • Меж (1px, 2px точно)
- • Тіней (box-shadow)
- • Невеликих точних коригувань
- • Іконок/зображень фіксованого розміру
👍 Використовуйте % для:
- • Ширини та висоти (гнучкі макети)
- • Адаптивних контейнерів
- • Колонок сітки
- • Пропорцій (aspect ratio)
Конвертер CSS-одиниць — калькулятор px, rem, em, %
🎨 Конвертуйте CSS-одиниці: пікселі (px), rem, em, відсотки (%), пункти (pt) та viewport-одиниці (vw, vh). Необхідний інструмент для адаптивного вебдизайну та розробки.
Типи CSS-одиниць
- Абсолютні одиниці: px, pt, cm, mm, in — фіксований розмір незалежно від контексту
- Відносні одиниці: rem, em, %, vw, vh — масштабуються відносно батька або viewport
- Відносно шрифту: rem, em, ch, ex — базуються на розмірі шрифту
- Відносно viewport: vw, vh, vmin, vmax — базуються на розмірах вікна перегляду
Пояснення одиниць
- px (пікселі): 1px = 1 піксель пристрою. Точно, але не масштабується.
- rem: Відносно кореневого елемента (html). За замовчуванням 1rem = 16px.
- em: Відносно розміру шрифту батьківського елемента. Може «накопичуватися» у вкладених елементах.
- %: Відносно властивості батьківського елемента. 100% = як у батька.
- pt (пункти): Друкарська одиниця. 1pt = 1/72 дюйма ≈ 1.333px.
- vw: 1vw = 1% ширини viewport. 100vw = повна ширина.
- vh: 1vh = 1% висоти viewport. 100vh = повна висота.
Поширені конвертації
- 1rem = 16px (типове налаштування браузера)
- 1em = 16px (якщо батько 16px)
- 100% = розмір батьківського елемента
- 12pt = 16px (поширено у друці)
- 1vw = 19.2px (для viewport 1920px)
Метод 62.5%
Встановіть html { font-size: 62.5%; }
щоб 1rem = 10px. Це спрощує обчислення: 1.6rem = 16px, 2.4rem = 24px тощо.
Доступність
- Використовуйте rem для шрифтів: поважає налаштування розміру шрифту користувача
- Уникайте px для шрифтів: не масштабується з налаштуваннями користувача
- Використовуйте відносні одиниці: краще для зуму/збільшення
- Тестуйте різні розміри: перевірте 200% zoom та режим великого тексту
Адаптивний дизайн
Використовуйте rem у media query: @media (min-width: 48rem)
замість 768px. Так брейкпоінти
масштабуються разом із налаштуваннями розміру шрифту користувача.
💡 Порада: сучасна практика — використовувати rem для більшості розмірів (шрифти, відступи, брейкпоінти), px — для меж і дрібних деталей, а % або viewport-одиниці — для макетів. Уникайте em для відступів — він може накопичуватися.
Asted Cloud
Коментарі (0)
Поділіться своєю думкою — будь ласка, будьте ввічливі та по темі.
Увійдіть, щоб коментувати