Конвертер одиниць CSS
Перетворюйте довжину в CSS між px, rem, em, vw, vh, pt і відсотками. Введіть значення, оберіть його одиницю, задайте розмір шрифту кореня та батьківського елемента, а також розміри в’юпорта — і одразу одержте всі еквіваленти.
Перетворення між px, rem, em, vw і vh
Формула одиниць CSS
Де:
- \(v\) — введена вами довжина у вихідній одиниці
- \(f(\text{одиниця})\) — скільком пікселям дорівнює одна одиниця цього типу:
- \(px\): 1 \(rem\): розмір шрифту кореня \(em\): розмір шрифту батьківського елемента \(vw\): ширина в’юпорта \(/ 100\) \(vh\): висота в’юпорта \(/ 100\) \(pt\): \(96/72 = 1.3333\) \(%\): розмір шрифту батьківського елемента \(/ 100\)
Калькулятор спочатку перетворює введене значення в пікселі, а потім ділить його на піксельний коефіцієнт кожної цільової одиниці. Такий двоетапний підхід гарантує, що всі сім результатів узгоджені між собою.
Одиниці CSS — приклад обчислення
Приклад: перетворимо 24px на rem, em, vw, vh і pt за розміру шрифту кореня та батьківського елемента 16px і в’юпорта 1920×1080 (стандартні значення калькулятора).
\[ px = 24 \times 1 = 24 \]
\[ rem = \frac{24}{16} = 1.5 \quad em = \frac{24}{16} = 1.5 \]
\[ vw = \frac{24}{1920/100} = \frac{24}{19.2} = 1.25 \quad vh = \frac{24}{1080/100} \approx 2.2222 \]
\[ pt = 24 \times \frac{72}{96} = 18 \]
Результат: 24px = 1.5rem = 1.5em = 1.25vw = 2.2222vh = 18pt.
Як користуватися конвертером одиниць CSS
- Введіть довжину в поле Значення — наприклад, 24. Підходять і від’ємні значення, що зручно для від’ємних відступів.
- Оберіть одиницю цього значення у випадному списку Одиниця CSS (px, rem, em, vw, vh, pt або %).
- Задайте розмір шрифту кореня — розмір шрифту елемента
<html>. Типово браузери використовують 16px. - Задайте розмір шрифту батьківського елемента — його обчислений розмір шрифту, потрібен для перетворення em і %.
- Введіть ширину та висоту в’юпорта вікна браузера в пікселях; саме від них залежать результати для vw і vh.
- Одержте одразу всі еквіваленти в розділі Перетворені значення разом із основою перетворення, яка показує, скільком пікселям дорівнює кожна одиниця у ваших умовах.
Що таке одиниці CSS і чому вони важливі?
Довжини в CSS поділяються на дві родини. Абсолютні одиниці, як-от px і pt, мають фіксований розмір: специфікація CSS визначає опорний піксель так, що 1in = 96px = 72pt. Відносні одиниці залежать від контексту: rem посилається на розмір шрифту кореневого елемента, em — на розмір шрифту батьківського, vw і vh — на 1% ширини або висоти в’юпорта, а % (для font-size) — на розмір шрифту батьківського елемента.
Вибір одиниці визначає поведінку макета. Значення в px залишаються незмінними попри налаштування користувача, тому вони передбачувані для рамок і дрібних деталей, але негнучкі для типографіки. Значення в rem масштабуються разом із розміром шрифту кореня: якщо користувач збільшує базовий текст у браузері, все, що задано в rem, зростає пропорційно — це ключова вимога доступності. Значення в em накопичуються у вкладених елементах, що може давати несподівані результати в глибокій розмітці.
В’юпортні одиниці змушують типографіку й відступи реагувати на розмір вікна. Ширина, задана як 50vw, завжди займає половину екрана, тому у великих перших секціях і для текучої типографіки vw часто поєднують із rem через clamp(). Оскільки vw і vh змінюються при кожній зміні розміру вікна, їх перетворення в px має сенс лише для одного конкретного розміру в’юпорта — саме того, який ви вводите в калькулятор.
Тлумачити результат просто: кожне значення — це та сама фізична довжина, виражена в іншій одиниці. Якщо ви мігруєте дизайн-систему з px на rem, колонка rem підкаже значення токена, яке треба записати; якщо ви готуєте матеріал до друку чи порівнюєте з інструментами дизайну, що працюють із пунктами, колонка pt дасть прямий еквівалент.
Припущення, обмеження та практичні поради
- Конвертер припускає стандартний опорний піксель CSS:
1in = 96px = 72pt. Фізичний (друкований) результат може трохи відрізнятися залежно від пристрою. - Відсотки трактуються як відносні до розміру шрифту батьківського елемента, що правильно для
font-size. Дляwidth,height,marginіpaddingвідсоток обчислюється від розмірів батьківського елемента, тож у таких випадках потрібне інше опорне значення. - em є відносною до розміру шрифту батьківського елемента. Але у властивостях на кшталт
line-heightчиpaddingсамого елемента em посилається на власний розмір шрифту цього елемента — скоригуйте поле «Розмір шрифту батьківського елемента» відповідно. - Результати для vw і vh чинні лише для введених вами розмірів в’юпорта. Перевірте кілька розмірів (наприклад, 1920×1080, 1366×768, 390×844), щоб побачити, як змінюються перетворені значення.
- За певних налаштувань браузери застосовують мінімальний розмір шрифту, через який дуже дрібний текст на основі rem або em може відображатися більшим, ніж випливає з розрахунку.
- Зручне правило: за типового розміру шрифту кореня 16px маємо 1rem = 16px, тобто px ÷ 16 = rem. Якщо змінити корінь на 10px, значення rem відповідатимуть px ÷ 10 — саме тому багато дизайн-систем використовують корінь 10px.
Якщо вам також потрібно перетворювати одиниці вимірювання чи технічні одиниці, скористайтеся нашими конвертером одиниць потужності, конвертером швидкості передавання даних або універсальним конвертером одиниць швидкості.
Часті запитання
Як перетворити px на rem вручну, без калькулятора?
Поділіть значення в пікселях на розмір шрифту кореня. За браузерного стандарту 16px формула така: \( rem = px \div 16 \). Отже, 24px = 1.5rem, 32px = 2rem, а 12px = 0.75rem. У зворотний бік — множення: \( px = rem \times 16 \). Якщо проєкт задає інший розмір кореня, наприклад 10px у популярному прийомі з 62.5%, просто замініть 16 на це значення.
Чим em відрізняється від rem і коли що використовувати?
rem завжди посилається на розмір шрифту кореневого елемента, тож 1.5rem означає одне й те саме в будь-якому місці документа. em посилається на розмір шрифту батьківського елемента (або самого елемента — для властивостей на кшталт padding і line-height), тому у вкладеній розмітці перемножується. Типова рекомендація: використовуйте rem для розмірів шрифту та відступів, щоб значення були передбачуваними та поважали налаштування користувача; використовуйте em там, де потрібно масштабування разом із локальним текстом, наприклад для внутрішніх відступів кнопки.
Скільки пікселів у 1pt і як pt і px пов’язані з дюймами?
CSS визначає опорний піксель так, що \( 1\text{in} = 96\text{px} = 72\text{pt} \). Звідси 1pt дорівнює \( 96/72 \approx 1.3333 \)px, а 1px — 0.75pt. Саме тому текстові процесори та інструменти друкарського дизайну, що працюють із пунктами, показують інші числа, ніж CSS: шрифт 12pt на екрані відображається як 16px. Конвертер використовує саме це співвідношення для результатів у pt.
Чому мої значення em не збігаються з тим, що показує браузер?
Дві типові причини. По-перше, em перемножується: якщо батьківський елемент має font-size 1.25em від кореня 16px (тобто 20px), а дочірньому задано 1.5em, то дочірній елемент матиме 30px, а не 24px. По-друге, для властивостей на кшталт padding, margin і line-height самого елемента em посилається на власний розмір шрифту цього елемента, а не батьківського. У таких випадках введіть обчислений розмір шрифту самого елемента в поле «Розмір шрифту батьківського елемента».
Чи однакові значення vw і vh на всіх екранах?
Ні. 1vw — це 1% поточної ширини в’юпорта, тому те саме значення vw відповідає різній кількості пікселів за різних розмірів вікна. Наприклад, 10vw — це 192px на екрані шириною 1920px, але лише 39px на телефоні з шириною 390px. Перетворюйте vw/vh у px лише для конкретного розміру в’юпорта — введіть у калькулятор точні розміри, які вас цікавлять, і повторіть обчислення для інших контрольних точок.
Як дізнатися, який розмір шрифту кореня фактично використовує сайт?
Відкрийте DevTools браузера, проінспектуйте елемент <html> і подивіться його обчислений font-size на панелі Styles або Computed. Якщо жодне правило CSS його не змінює, застосовується браузерний стандарт 16px. Зауважте, що деякі сайти використовують прийом із 62.5%, встановлюючи корінь 10px, щоб 1rem = 10px. Також перевірте, чи якийсь розширювач браузера чи налаштування мінімального розміру шрифту не змінює фактичного значення.
Що краще для доступності — px чи rem?
Для розмірів шрифту зазвичай краще rem, бо він масштабується, коли користувачі збільшують базовий розмір тексту в браузері, тоді як текст у px залишається фіксованим і може ігнорувати це налаштування. Це важливо для користувачів із порушеннями зору і є вимогою настанов із доступності, як-от WCAG. px залишається доречним для рамок, тіней і тонких ліній, де масштабування небажане. Практичний підхід: rem для типографіки та відступів, px для декоративних деталей, критичних до пікселя, а clamp() із rem і vw — для текучої типографіки.