Що таке Конвертер одиниць CSS?
CSS підтримує кілька різних одиниць для розмірів — абсолютні, як px і pt, та відносні, як rem, em, vw, vh і %. Відносні одиниці є критично важливими для адаптивного, доступного дизайну (rem, зокрема, враховує налаштування розміру шрифту в браузері користувача), але конвертувати між ними подумки справді складно, оскільки результат залежить від контексту: кореневого розміру шрифту, розміру шрифту поточного елемента чи розмірів вьюпорту.
Цей конвертер робить ці розрахунки за вас: встановіть базовий розмір шрифту, розміри вьюпорту та значення, яке конвертуєте, і миттєво побачте еквівалентне значення в кожній іншій одиниці — корисно для перекладу пікселевих вимірів макета дизайну в адаптивні значення rem/vw або для перевірки того, як насправді відображається на екрані наявне правило CSS.
Коли використовувати цей калькулятор
- Коли потрібно оцінити витрати на інструмент перед початком проекту
- Коли порівнюєте результати з подібними інструментами
- Коли вивчаєте, як використовувати інструмент у різних сценаріях
- Коли ділитеся результатами з командою або клієнтами
- Коли перевіряєте точність обчислень інструменту
- Коли шукаєте швидкий і простий спосіб вирішення конкретної проблеми
Кроки:
- Введіть значення, яке хочете конвертувати, і виберіть його початкову одиницю.
- Встановіть базовий розмір шрифту (за замовчуванням — стандарт браузера 16px).
- Для конвертацій vw/vh введіть цільову ширину та висоту вьюпорту.
- Миттєво прочитайте еквівалентне значення в кожній іншій одиниці.
Формула
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 чи %, розмір якої залежить від іншого значення
Пов'язані концепції
- Конвертер кольорів: Конвертуйте між форматами кольорів HEX, RGB та HSL
- Конвертер довжин: Конвертуйте між дюймами, сантиметрами, пікселями та іншими
- Конвертер одиниць: Конвертуйте між різними одиницями вимірювання
- Калькулятор співвідношення сторін: Обчислюйте та конвертуйте співвідношення сторін
- Конвертер даних: Конвертуйте між байтами, КБ, МБ, ГБ та ТБ
Приклад
При базовому розмірі шрифту 16px 1.5rem конвертується в 24px. При ширині вьюпорту 1440px 5vw конвертується в 72px.
Інтерпретація результатів
Цей інструмент показує детальні результати на основі ваших вхідних даних. Уважно перегляньте кожен розділ, щоб зрозуміти, як інтерпретувати цифри та приймати на їх основі рішення.
Якщо у вас є запитання про те, як працює інструмент або як інтерпретувати певні результати, перегляньте розділ поширених запитань нижче або зверніться до служби підтримки.