Skip to main content
CalculoraCalculora

Фінанси та Бізнес

Фінансові КалькуляториІнвестиції та ПлануванняОсобисті ФінансиІнвестиції в НерухомістьБізнес-ІнструментиСтартап і SaaS

Математика та Технології

Математичні КалькуляториІнженерні ІнструментиІнструменти з фізикиІнструменти РозробникаШкільні інструменти

Здоров'я та Життя

Медичні ІнструментиУтилітиРандомайзери

Творці та Спеціальності

Економіка ТворцівІсламські ІнструментиСталістьІгри

Конвертери

Конвертер ОдиницьКонвертер ДовжиниКонвертер ВагиКонвертер Температури→ Конвертери Одиниць

Генератори випадкових чисел

Генератор ЧиселНадійність ПароляКолесо ФортуниСимулятор Підкидання МонетиСимулятор Гральних КістокЧасові Пояси→ Рандомайзери
Конвертер Файлів

Інструменти PDF

Конвертувати PDF у JPGКонвертувати PDF у PNGПеретворити PDF в TXTКонвертувати PDF у GIFКонвертувати PDF у WebPКонвертувати PDF у SVGПеретворити PDF в DOCXКонвертувати PDF у ExcelКонвертувати PDF у PowerPointКонвертувати PDF у HTMLКонвертувати PDF у MarkdownКонвертувати PDF у TIFF

Конвертер Зображень

Конвертувати JPG у PNGКонвертувати PNG у JPGКонвертувати PNG у WebPКонвертувати WebP у PNGКонвертувати WebP у JPGКонвертувати JPG у WebPКонвертувати SVG у PNGКонвертувати SVG у JPGКонвертувати SVG у WebPКонвертувати BMP у PNGКонвертувати BMP у JPGКонвертувати BMP у WebP

Розширені Зображення

Конвертувати HEIC у JPGКонвертувати HEIC у PNGКонвертувати TIFF у JPGКонвертувати TIFF у PNGКонвертувати JPG у TIFFКонвертувати PNG у TIFFКонвертувати JPG у ICOКонвертувати PNG у ICOПеретворити JPEG в AVIFКонвертувати PNG у AVIF

GIF та Анімація

Конвертувати GIF у PNGКонвертувати GIF у JPGПеретворення GIF на окремі кадри (PNG/JPEG)Конвертувати PNG у GIFКонвертувати JPG у GIFКонвертувати GIF у WebP

Редагування

Додати водяний знакВидалення об'єктів із зображенняМиттєва зміна розміру зображень у браузеріСтискайте зображення онлайн — зменшуйте розмір файлу, зберігайте якість
Математичний ВикликМатематичний ВикликВордлБинт ВаладСудоку2048
Конвертер валют
CalculoraCalculora

Ваша платформа калькуляторів все-в-одному. Безкоштовні, швидкі та точні інструменти для будь-яких потреб.

Дані, введені в калькулятор, залишаються на 100% приватними — усі обчислення відбуваються у вашому браузері і ніколи не потрапляють на наші сервериБезкоштовно назавжди — без платіжних стін, без підписок, без облікових записів

Популярне

  • Калькулятор ІМТ
  • Калькулятор Кредиту
  • Калькулятор Віку
  • Калькулятор Іпотеки
  • Калькулятор Відсотків
  • Науковий Калькулятор
  • Переглянути все →

Категорії

  • Математика
  • Фінанси
  • Здоров'я та Життя
  • Фінанси та Бізнес
  • Інструменти розробника
  • Інженерія
  • Категорії →

Більше

  • Конвертер валют
  • Конвертер Файлів
  • Ігри та Розваги

Юридична інформація

  • Про нас
  • Зв'язатися з нами
  • Політика конфіденційності
  • Умови використання
  • Відмова від відповідальності
  • Карта сайту

Мови

enEnglisharالعربيةesEspañoldeDeutschfrFrançaishiहिन्दीidBahasa IndonesiaitItalianoja日本語ko한국어ptPortuguêsruРусскийtrTürkçeviTiếng Việtbnবাংলাzh中文nlNederlandsplPolskiukУкраїнськаmsBahasa Melayuthภาษาไทย

© 2026 Calculora. Усі права захищені.

Створено з — 100% безкоштовно

Легкий і швидкий — файли cookie та аналітика працюють лише за вашою згодою

  1. Головна
  2. Інструменти Розробника
  3. Конвертер одиниць CSS

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

Миттєво конвертуйте між px, rem, em, pt, vw, vh та %, використовуючи свій базовий розмір шрифту та розміри вьюпорту — більше не потрібно вгадувати, скільки насправді 1.5rem у пікселях.

Завантаження калькулятора...
Цей інструмент вам допоміг?

Що таке Конвертер одиниць CSS?

CSS підтримує кілька різних одиниць для розмірів — абсолютні, як px і pt, та відносні, як rem, em, vw, vh і %. Відносні одиниці є критично важливими для адаптивного, доступного дизайну (rem, зокрема, враховує налаштування розміру шрифту в браузері користувача), але конвертувати між ними подумки справді складно, оскільки результат залежить від контексту: кореневого розміру шрифту, розміру шрифту поточного елемента чи розмірів вьюпорту. Цей конвертер робить ці розрахунки за вас: встановіть базовий розмір шрифту, розміри вьюпорту та значення, яке конвертуєте, і миттєво побачте еквівалентне значення в кожній іншій одиниці — корисно для перекладу пікселевих вимірів макета дизайну в адаптивні значення rem/vw або для перевірки того, як насправді відображається на екрані наявне правило CSS.

Коли використовувати цей калькулятор

  • Коли потрібно оцінити витрати на інструмент перед початком проекту
  • Коли порівнюєте результати з подібними інструментами
  • Коли вивчаєте, як використовувати інструмент у різних сценаріях
  • Коли ділитеся результатами з командою або клієнтами
  • Коли перевіряєте точність обчислень інструменту
  • Коли шукаєте швидкий і простий спосіб вирішення конкретної проблеми

Кроки:

  1. Введіть значення, яке хочете конвертувати, і виберіть його початкову одиницю.
  2. Встановіть базовий розмір шрифту (за замовчуванням — стандарт браузера 16px).
  3. Для конвертацій vw/vh введіть цільову ширину та висоту вьюпорту.
  4. Миттєво прочитайте еквівалентне значення в кожній іншій одиниці.

Формула

1rem = 1em = базовий розмір шрифту (за замовчуванням 16px) 1pt = 96/72 px ≈ 1,333px 1vw = ширина вьюпорту / 100 1vh = висота вьюпорту / 100 1% = еталонне значення / 100

Випадки використання

  • Перетворення пікселевої специфікації дизайнера з Figma/Sketch на значення rem для доступного CSS
  • Перевірка того, як насправді відображається адаптивний розмір шрифту на основі vw за певної ширини екрана
  • Переклад застарілого CSS на основі pt для друку чи листів у веб-стандартні px чи rem
  • Аудит того, чи узгоджується шкала відступів дизайн-системи в різних одиницях
  • Швидка перевірка значення CSS під час рев'ю коду без відкриття інструментів розробника

Ключові переваги

  • Конвертація між усіма 7 поширеними одиницями CSS в одному місці
  • Використовує ваш фактичний базовий розмір шрифту та вьюпорт, а не фіксоване припущення
  • Миттєвий результат під час введення — не потрібно відкривати інструменти розробника браузера
  • Безкоштовно, без реєстрації, повністю працює у вашому браузері

Поради

  • Віддавайте перевагу rem над em для розмірів шрифту, щоб уникнути неочікуваного накопичення у вкладених компонентах
  • Використовуйте dvh/svh замість vh для мобільних повноекранних макетів, якщо цільові браузери це підтримують
  • Підтримуйте узгоджений базовий розмір шрифту в межах вашої дизайн-системи, щоб конвертації rem залишалися передбачуваними
  • Під час перекладу пікселево-точного дизайну конвертуйте відступи в rem, але залишайте товщину меж та інші дрібні деталі в px

Поширені помилки

  • Припущення, що 1rem завжди дорівнює 16px, без перевірки, чи не змінено кореневий розмір шрифту
  • Використання vh для мобільних повноекранних макетів без урахування поведінки адресного рядка браузера
  • Вкладення розмірів шрифту на основі em і несподіванка, коли вони накопичуються неочікувано
  • Непослідовне змішування px і rem у межах одного компонента, що порушує масштабування доступності

Ключові терміни

  • Кореневий розмір шрифту: розмір шрифту, встановлений на елементі html, відносно якого визначаються всі одиниці rem
  • Вьюпорт (Viewport): видима область веб-сторінки у вікні браузера
  • Абсолютна одиниця (Absolute unit): одиниця на кшталт px чи pt із фіксованим реальним розміром, не залежним від контексту
  • Відносна одиниця (Relative unit): одиниця на кшталт rem, em, vw чи %, розмір якої залежить від іншого значення

Пов'язані концепції

  • [object Object]
  • [object Object]
  • [object Object]
  • [object Object]
  • [object Object]

Приклад

При базовому розмірі шрифту 16px 1.5rem конвертується в 24px. При ширині вьюпорту 1440px 5vw конвертується в 72px.

Інтерпретація результатів

Цей інструмент показує детальні результати на основі ваших вхідних даних. Уважно перегляньте кожен розділ, щоб зрозуміти, як інтерпретувати цифри та приймати на їх основі рішення. Якщо у вас є запитання про те, як працює інструмент або як інтерпретувати певні результати, перегляньте розділ поширених запитань нижче або зверніться до служби підтримки.

Часті запитання

Яка різниця між rem і em?
rem завжди відносний до розміру шрифту кореневого елемента (html), тому він залишається незмінним незалежно від того, наскільки глибоко вкладений елемент. em відносний до розміру шрифту поточного елемента, тому може накопичуватися при вкладенні — цей інструмент для простоти трактує обидві одиниці однаково, використовуючи ваш базовий розмір шрифту.
Чому 1rem зазвичай дорівнює 16px?
16px — це стандартний розмір шрифту браузера за замовчуванням для кореневого елемента html практично в кожному браузері. Оскільки rem відносний до цього кореневого розміру, 1rem дорівнює 16px, якщо тільки сторінка (або налаштування браузера користувача) явно не змінює кореневий розмір шрифту.
Для чого використовуються vw і vh?
vw (ширина вьюпорту) і vh (висота вьюпорту) — це відсотки від поточної ширини та висоти вікна браузера — 1vw дорівнює 1% ширини вьюпорту. Вони часто використовуються для повноекранних макетів і адаптивної типографіки, що масштабується разом з екраном.
Чи піксель завжди рівно 1/96 дюйма?
За специфікацією CSS — так, піксель CSS визначено як 1/96 дюйма, тому 1pt (1/72 дюйма) конвертується рівно у 96/72 = 1,333 пікселя CSS.
Цей інструмент безкоштовний?
Так, цей інструмент повністю безкоштовний і не вимагає реєстрації. Ви можете вільно ним користуватися.
Чи безпечні дані?
Так, усі обчислення виконуються у вашому браузері. Жодні дані не надсилаються на наші сервери.
Чи можу я користуватися інструментом на телефоні?
Так, інструмент сумісний з усіма пристроями, включно зі смартфонами та планшетами.
Як зберегти мої результати?
Ви можете скопіювати результати або експортувати їх у форматі PDF чи CSV, якщо ця функція доступна.
Чи точні результати?
Результати базуються на визнаних формулах і рівняннях. Перевірте вхідні дані для максимальної точності.
Чи можу я користуватися інструментом офлайн?
Так, більшість обчислень виконується локально у вашому браузері і не потребує підключення до інтернету.
Як усунути проблему з інструментом?
Переконайтеся, що ви використовуєте останню версію браузера, і за потреби очистіть кеш. Якщо проблема не зникає, зверніться до служби підтримки.

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

Досліджуйте більше інструментів

Калькулятор співвідношення сторін

Пропускна Здатність

Час Завантаження

Хмарний Хостинг

Витрати CDN

Калькулятор монетизації API

Схожі інструменти

Калькулятор співвідношення сторін
Інструменти Розробника
Пропускна Здатність
Інструменти Розробника
Час Завантаження
Інструменти Розробника
Хмарний Хостинг
Інструменти Розробника
px
16
rem
1
em
1
pt
12
vw
1.1111
vh
1.7778
%
100