CSS Unit Converter: px, rem, em, and More

Что такое единицы CSS?

Одиниці CSS визначають розмір елементів на веб-сторінці. Вони поділяються на дві категорії: абсолютні одиниці (px, cm, mm, in, pt, pc) з фіксованими фізичними розмірами та відносні одиниці (rem, em, vw, vh, vmin, vmax, %), які масштабуються залежно від контексту, такого як розмір шрифту або розміри вікна перегляду.

Сучасний адаптивний дизайн значною мірою покладається на відносні одиниці. Одиниця rem масштабується з кореневим розміром шрифту (зазвичай 16px), em масштабується з розміром шрифту батьківського елемента, а одиниці вікна перегляду (vw, vh) масштабуються з вікном браузера.

Как работает конвертация единиц CSS

Конвертація між одиницями CSS вимагає знання базового контексту: кореневого розміру шрифту для rem, батьківського розміру шрифту для em та розмірів вікна перегляду для vw/vh.

• px у rem — розділити піксельне значення на кореневий розмір шрифту (за замовчуванням 16px), тобто 24px = 1.5rem коли корінь 16px
• rem у em — rem та em рівні, коли елемент успадковує кореневий розмір шрифту; інакше множити на співвідношення батьківського до кореневого розміру
• px у vw/vh — розділити піксельне значення на ширину вікна (або висоту) та помножити на 100, тобто 192px = 10vw на вікні 1920px

Когда использовать конвертацию единиц CSS

Конвертація між одиницями CSS є щоденним завданням у сучасній фронтенд-розробці.

• Адаптивний дизайн — конвертувати фіксовані піксельні макети у rem- або vw-засновані розкладки, що елегантно масштабуються від мобільних до десктопних
• Доступність — використання одиниць rem гарантує правильне масштабування тексту, коли користувачі змінюють стандартний розмір шрифту браузера
• Токени дизайн-системи — конвертувати специфікації дизайнерів (зазвичай в пікселях) у rem-засновані токени, що підтримують послідовні співвідношення

Часто задаваемые вопросы

Чи слід використовувати rem або em для розмірів шрифтів?

Використовуйте rem у більшості випадків. Одиниці rem є відносними до кореневого розміру шрифту, що робить їх передбачуваними незалежно від глибини вкладення. Одиниці em накопичуються при вкладенні (1.2em всередині іншого 1.2em стає 1.44x). Залишайте em для конкретних компонентів, де масштабування відносно батька є навмисним.

Який кореневий розмір шрифту за замовчуванням у браузерах?

Усі основні браузери використовують 16px як кореневий розмір шрифту за замовчуванням. Це означає, що 1rem = 16px, якщо не перевизначено CSS. Користувачі можуть змінити це в налаштуваннях браузера для доступності, тому використання rem замість px є важливим для доступного дизайну.

Коли слід використовувати одиниці вікна перегляду замість rem?

Використовуйте одиниці вікна перегляду (vw, vh) для елементів, які повинні масштабуватися з вікном браузера, а не з розміром шрифту. Поширені приклади включають повноекранні hero-секції (height: 100vh), плавну типографіку (clamp з vw) та адаптивний padding. Уникайте vw для основного тексту — це ігнорує налаштування шрифту користувача.