Перейти до вмісту
🛠️
Whiz Tools

Конвертер PX в REM та EM – Безкоштовний CSS калькулятор одиниць

Миттєво конвертуйте пікселі в одиниці REM та EM. Безкоштовний конвертер CSS-одиниць для адаптивного веб-дизайну. Підтримує налаштування власного розміру шрифту та розрахунки в реальному часі для точних результатів.

Конвертер одиниць PX, REM та EM

Конвертація між пікселями (PX), кореневим em (REM) та em (EM). Введіть значення в будь-якому полі, щоб побачити еквівалентні значення в інших одиницях.

px
px
px
rem
em
Візуалізація недоступна для від'ємних або нульових значень

Формули конвертації

  • PX до REM: значення в px ÷ розмір кореневого шрифту
  • PX до EM: значення в px ÷ розмір шрифту батьківського елементу
  • REM до PX: значення в rem × розмір кореневого шрифту
  • EM до PX: значення в em × розмір шрифту батьківського елементу
Калькулятор завантаження...
📚

Документація

Конвертер одиниць PX, REM і EM

Конвертер px у rem та em перетворює довжину CSS з пікселів (px) у кореневий em (rem) або em, використовуючи розмір шрифту кореневого елемента та розмір шрифту батьківського елемента, які задає користувач. Ці три одиниці є найпоширенішими способами задання розміру тексту й інтервалів у CSS — мові для стилізації вебсторінок.

Що таке px, rem і em?

Піксель (px) — це фіксована одиниця. Блок завширшки 200px залишається завширшки 200 пікселів незалежно від розміру шрифту на сторінці.

rem («кореневий em») — це одиниця, масштаб якої залежить від розміру шрифту кореневого елемента сторінки, зазвичай тегу <html>. Більшість браузерів установлює для кореневого елемента розмір шрифту 16 пікселів, якщо сайт його не змінює. Якщо розмір кореневого шрифту становить 16 пікселів, то 1rem дорівнює 16 пікселям.

em — це одиниця, масштаб якої залежить від розміру шрифту батьківського елемента, тобто елемента, що її містить. Якщо батьківський елемент має font-size: 20px, то 1em усередині цього елемента дорівнює 20 пікселям.

Основна відмінність між rem і em полягає в тому, відносно чого вони вимірюються. Rem завжди орієнтується на кореневий елемент. Em орієнтується на найближчий батьківський елемент, тому його значення може змінюватися на кожному рівні вкладеності.

Як обчислити px у rem

Щоб перетворити пікселі на rem, поділіть значення в пікселях на розмір кореневого шрифту:

r=pRr = \frac{p}{R}

де r — довжина в rem, p — довжина в пікселях, а R — розмір кореневого шрифту в пікселях.

Приклад обчислення

За стандартного розміру кореневого шрифту 16 пікселів 24 пікселі перетворюються на:

24 ÷ 16 = 1,5 rem

Якщо сайт установлює розмір кореневого шрифту 10 пікселів (поширений прийом, що полягає у встановленні html { font-size: 62.5%; }, оскільки 62,5% від 16 пікселів становить 10 пікселів), ті самі 24 пікселі перетворюються на:

24 ÷ 10 = 2,4 rem

Як обчислити rem у px

Щоб виконати зворотне перетворення, помножте значення rem на розмір кореневого шрифту:

p=r×Rp = r \times R

де p — довжина в пікселях, r — довжина в rem, а R — розмір кореневого шрифту.

За кореневого розміру 16 пікселів 1.5rem перетворюється назад так: 1,5 × 16 = 24 пікселя.

Як обчислити px у em

Щоб перетворити пікселі на em, поділіть значення в пікселях на розмір шрифту батьківського елемента:

e=pPe = \frac{p}{P}

де e — довжина в em, а P — розмір шрифту батьківського елемента в пікселях.

Приклад обчислення

Якщо розмір шрифту батьківського елемента становить 20 пікселів, то 24 пікселі перетворюються на:

24 ÷ 20 = 1,2 em

Як обчислити em у px

Помножте значення em на розмір шрифту батьківського елемента:

p=e×Pp = e \times P

де p — довжина в пікселях, e — довжина в em, а P — розмір шрифту батьківського елемента.

За батьківського розміру 20 пікселів 1.2em перетворюється назад так: 1,2 × 20 = 24 пікселі.

Як обчислити rem у em і em у rem

Оскільки rem і em вимірюються відносно різних розмірів шрифту, для перетворення між ними потрібні і розмір кореневого шрифту, і розмір шрифту батьківського елемента:

e=r×RPe = r \times \frac{R}{P}

r=e×PRr = e \times \frac{P}{R}

де R — розмір кореневого шрифту, а P — розмір шрифту батьківського елемента.

Приклад обчислення

Якщо розмір кореневого шрифту становить 16 пікселів, а розмір шрифту батьківського елемента — 20 пікселів, 2rem перетворюється на:

2 × (16 ÷ 20) = 1,6 em

Якщо розміри кореневого та батьківського шрифтів однакові, 1 rem завжди дорівнює 1 em.

Коли корисна кожна одиниця

Пікселі добре підходять для деталей, розмір яких не має змінюватися, наприклад для рамки завтовшки 1 піксель або піктограми фіксованої ширини.

Rem часто використовують для інтервалів і типографіки, які мають залишатися узгодженими на всій сторінці. Оскільки rem завжди посилається на розмір кореневого шрифту, значення rem не змінюється незалежно від глибини вкладеності елемента. Це також означає, що макети на основі rem автоматично адаптуються, коли користувач збільшує стандартний розмір шрифту у своєму браузері, що допомагає людям зі слабким зором.

Em добре підходить усередині одного самодостатнього компонента, наприклад кнопки, де внутрішні відступи мають масштабуватися разом із розміром шрифту самої кнопки. Поширена проблема em полягає в накопиченні ефекту: якщо кілька вкладених елементів використовують font-size: 1.2em, кожен рівень множить попередній, тому розміри шрифту зростають швидше, ніж передбачалося.

1.level-1 { font-size: 1.2em; }  /* 19.2px, if the parent is 16px */
2.level-2 { font-size: 1.2em; }  /* 23.04px (19.2px × 1.2) */
3.level-3 { font-size: 1.2em; }  /* 27.65px (23.04px × 1.2) */
4

Після трьох рівнів текст збільшився приблизно на 73%, а не на 20%, як розробник міг би очікувати від одного правила 1.2em.

Використання конвертера

  1. Введіть значення в поле для пікселів, rem або em.
  2. Два інші поля оновлюються автоматично з округленням до чотирьох десяткових знаків.
  3. Установіть розмір кореневого шрифту відповідно до елемента <html> проєкту. За замовчуванням у більшості браузерів він становить 16 пікселів і впливає лише на rem.
  4. Установіть розмір шрифту батьківського елемента таким самим, як розмір шрифту елемента, у якому містилося б значення em. Це впливає лише на em.
  5. Використовуйте кнопку копіювання поруч із полем, щоб скопіювати його значення.

В обидва поля розміру шрифту можна вводити лише ціле число пікселів, а найменше дозволене значення — 1 піксель. Кнопка скидання очищає значення й повертає обидва розміри шрифту до 16 пікселів.

Під полями інструмент малює по одній смузі для кожної одиниці. Усі три смуги відображають однакову фізичну довжину, тому мають однакову ширину; це швидка перевірка правильності перетворення. Смуга відображається у справжній довжині в пікселях до 300 пікселів; усе, що довше, масштабується, щоб уміститися, тому смуги для значень 600 пікселів і 900 пікселів обидві мають довжину 300 пікселів. Смуги відображаються лише тоді, коли значення в пікселях більше за нуль.

Поширені запитання

У чому різниця між rem і em? Rem завжди посилається на розмір шрифту кореневого елемента. Em посилається на розмір шрифту найближчого батьківського елемента. Значення rem залишається однаковим у будь-якому місці сторінки, а значення em може змінюватися залежно від глибини вкладеності елемента.

Чому браузери використовують 16 пікселів як стандартний розмір шрифту? 16 пікселів тривалий час є стандартним розміром тексту в основних браузерах, оскільки такий текст зручно читати на звичайних екранах без додаткового стилізування. Рекомендації з вебдоступності радять забезпечити можливість збільшення тексту до 200% без порушення макета сторінки, і 16 пікселів є практичним початковим значенням для цього.

Що таке прийом 62,5%? Установлення html { font-size: 62.5%; } перетворює стандартний розмір кореневого шрифту 16 пікселів на 10 пікселів, оскільки 62,5% від 16 дорівнює 10. Це спрощує обчислення rem, оскільки 1,6 rem дорівнює 16 пікселям, а 2,4 rem — 24 пікселям.

Чи можуть значення px, rem і em бути від’ємними? Так, для властивостей, що допускають від’ємні довжини, наприклад для полів або CSS-трансформацій. Внутрішні відступи не можуть бути від’ємними в CSS; браузери ігнорують від’ємне значення внутрішнього відступу. Конвертер обробляє від’ємні значення, але не малює для них смуги, оскільки смуга не може мати від’ємної ширини.

Чи потрібно перетворювати кожне значення в пікселях на rem? Не обов’язково. Рамки та інші дрібні деталі зазвичай залишають у пікселях, оскільки їм рідко потрібно масштабуватися разом із розміром шрифту, а за ширини в частках пікселя вони можуть мати нерівномірний вигляд. Rem підходить для інтервалів і типографіки, які мають масштабуватися відповідно до налаштувань розміру шрифту користувача.

Чи впливає вибір одиниці на продуктивність сторінки? Ні. Під час компонування браузери перетворюють усі довжини CSS на однакове внутрішнє значення, тому px, rem і em відображаються з однаковою швидкістю. Вибір між ними впливає на зручність супроводу та доступність, а не на швидкість.