Конвертація одиниць CSS — процес перерахунку між різними одиницями довжини (px, em, rem, %, vw, vh тощо), що використовуються у веб-дизайні.
Абсолютні та відносні одиниці
Одиниці CSS умовно діляться на абсолютні і відносні. Абсолютні (px, pt, cm тощо) мають фіксований розмір, відносні (em, rem, %, vw, vh тощо) виражаються як відношення до базового значення.
px (Піксель)
Найпоширеніша одиниця, що відповідає одній точці на екрані. Зручна для фіксованих розмірів, але може створювати проблеми з доступністю, оскільки ігнорує налаштування шрифту користувача.
em (Em)
Відносна одиниця, що базується на розмірі шрифту батьківського елемента. 1em = font-size батька. У вкладених структурах обчислення накопичуються, що може давати несподівані розміри.
rem (Root Em)
Відносна одиниця, що базується на розмірі шрифту кореневого елемента (html). 1rem = font-size html (зазвичай 16px). На відміну від em не залежить від вкладеності, рекомендована в сучасному CSS.
% (Відсоток)
Відображає пропорцію від розміру батьківського елемента. Для font-size — відноситься до батька; для width — до ширини батька. База залежить від властивості.
vw/vh (Одиниці вікна перегляду)
Одиниці, що базуються на розмірах вікна перегляду. 1vw = 1% ширини вікна, 1vh = 1% висоти вікна. Дозволяють створювати гнучкі макети, що реагують на розмір екрану.
pt/pc (Одиниці для друку)
Одиниці, що використовуються у поліграфії. 1pt = 1/72 дюйма, 1pc = 12pt. Використовуються у стилях для друку та при генерації PDF; для екрану зазвичай обирають px або rem.
Фізичні одиниці (cm/mm/in)
Одиниці, що відображають реальну фізичну довжину. 1in = 2.54cm = 25.4mm = 96px (визначення CSS). Корисні для узгодженості з друкованими матеріалами, але фізичний розмір екрану не гарантується.
Переваги конвертації в реальному часі
Цей інструмент підтримує конвертацію в реальному часі і миттєво оновлює результати при зміні базових значень. Дозволяє швидко перевірити вигляд на різних екранах і налаштуваннях шрифтів.