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% приватними — усі обчислення відбуваються у вашому браузері і ніколи не потрапляють на наші сервериБезкоштовно назавжди — без платіжних стін, без підписок, без облікових записів

Популярне

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

Математика

  • Статистика
  • Розв'язувач Рівнянь
  • Калькулятор Дробів
  • Прості Множники
  • НСД і НСК
  • Логарифм

Фінанси

  • FIRE
  • Снігова Куля Боргу
  • Калькулятор Інвестицій
  • Пенсійний Калькулятор
  • Калькулятор Зарплати
  • Калькулятор ROI

Правове

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

Мови

  • enEnglish
  • arالعربية
  • esEspañol
  • deDeutsch
  • frFrançais
  • hiहिन्दी
  • idBahasa Indonesia
  • itItaliano
  • ja日本語
  • ko한국어
  • ptPortuguês
  • ruРусский
  • trTürkçe
  • viTiếng Việt
  • bnবাংলা
  • zh中文
  • nlNederlands
  • plPolski
  • ukУкраїнська
  • msBahasa Melayu
  • thภาษาไทย

© 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.

Формула

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

Як розрахувати

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

Приклад

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

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

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

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

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

Поради

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

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

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

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

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

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

Яка різниця між 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.

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

Співвідношення Сторін
Пропускна Здатність
Час Завантаження
Хмарний Хостинг
Витрати CDN
Монетизація API
px
16
rem
1
em
1
pt
12
vw
1.1111
vh
1.7778
%
100