Toolinix – simple online developer tools

CSS Unit Converter

Усі інструменти

Налаштування одиниць

Конвертація
Контекст

rem рахується від базового font-size. em і % — від parent size. vw і vh — від ширини та висоти viewport.

Статус
Очікує

Живий preview

CSS unit preview
16px = 1rem

Про CSS Unit Converter

CSS Unit Converter допомагає конвертувати популярні CSS-одиниці: px, rem, em, %, vw і vh. Це зручно для типографіки, spacing, responsive layout і адаптивних компонентів.

Можна змінити базовий font-size, parent size, viewport width і viewport height, щоб результат відповідав саме твоєму проєкту.

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

  1. Введіть значення для конвертації.
  2. Виберіть початкову та цільову CSS-одиницю.
  3. За потреби змініть base font size, parent size або viewport.
  4. Скопіюйте готове значення або CSS-правило.

Поради

  • Для rem часто використовують базове значення 16px.
  • Для em і % важливо правильно вказати parent size.
  • Для vw використовується ширина viewport, для vh — висота viewport.
  • Preview допомагає швидко побачити реальний масштаб значення.

Пов’язані інструменти

Можливо, тобі також стануть у пригоді ці інструменти.

CSS Media Query Generator
Створюйте responsive CSS media queries для брейкпоінтів, орієнтації, dark mode, reduced motion і hover support.
Інші інструменти
›
CSS Container Query Generator
Генеруйте CSS container queries з container type, container name, breakpoint-умовами та responsive CSS declarations.
Інші інструменти
›
CSS Grid Generator
Створюй CSS Grid layouts з колонками, рядками, відступами, вирівнюванням, live preview і готовим CSS.
Інші інструменти
›
Color Converter
Конвертуй HEX, RGB, RGBA і HSL миттєво у браузері.
Інші інструменти
›

FAQ по CSS unit converter

Чим px відрізняється від rem?
px — абсолютна CSS-одиниця. rem залежить від root font-size, який часто дорівнює 16px.
Коли краще використовувати em?
em залежить від font-size поточного або батьківського елемента, тому добре підходить для масштабування компонентів.
Як рахується відсоток?
Відсотки залежать від базового розміру. У цій тулі таким базовим значенням є parent size.
Як рахуються vw і vh?
1vw — це 1% ширини viewport, а 1vh — 1% висоти viewport.