Конвертер CSS-одиниць
Налаштування одиниць
rem рахується від базового font-size. em і % — від parent size. vw і vh — від ширини та висоти viewport.
Живий preview
Про CSS Unit Converter
CSS Unit Converter допомагає конвертувати популярні CSS-одиниці: px, rem, em, %, vw і vh. Це зручно для типографіки, spacing, responsive layout і адаптивних компонентів.
Можна змінити базовий font-size, parent size, viewport width і viewport height, щоб результат відповідав саме твоєму проєкту.
Як користуватись
- Введіть значення для конвертації.
- Виберіть початкову та цільову CSS-одиницю.
- За потреби змініть base font size, parent size або viewport.
- Скопіюйте готове значення або CSS-правило.
Поради
- Для rem часто використовують базове значення 16px.
- Для em і % важливо правильно вказати parent size.
- Для vw використовується ширина viewport, для vh — висота viewport.
- Preview допомагає швидко побачити реальний масштаб значення.
Перевірки конвертації CSS units перед заміною значення
Візуально однакові values не завжди еквівалентні, бо relative units залежать від fonts, viewport, containers або властивості.
Визначте reference
Уточніть, відносно чого обчислюються percentages, em, rem, viewport і container units: parent, root, element чи query container.
Уникайте хибної точності
Округлюйте лише настільки, наскільки потребує дизайн, і перевірте накопичення похибки у grids, transforms та повторюваних dimensions.
Тестуйте responsive behavior
Порівняйте результат на breakpoints, при зміні orientation, browser UI, zoom і різних root font sizes.
Обирайте units за призначенням
Використовуйте units, які виражають потрібний зв'язок, замість конвертації всього у pixels через однаковий поточний вигляд.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.