Що робить конвертер px, rem та em
Цей інструмент переводить значення пікселів (px) у відносні одиниці rem та em — і навпаки. Введіть число в будь-якому з трьох полів, і два інші автоматично перерахуються та покажуть еквівалентні значення. Додатково можна вказати власний базовий розмір шрифту та контекстний розмір шрифту для em, щоб конвертація точно відповідала налаштуванням вашого макета, а не лише типовим значенням за замовчуванням.
Поля введення: базовий розмір, em-контекст і значення
Інструмент працює з трьома полями:
- «Базовий розмір шрифту (px)» — базовий (root) розмір шрифту сторінки в пікселях, від якого рахуються rem. За замовчуванням тут стоїть 16px.
- «контекстний розмір шрифту em (px)» — розмір шрифту елемента, у межах якого рахується em. За замовчуванням теж 16px.
- «Значення» — число, яке ви хочете конвертувати: довжина в px, rem або em.
Ці три поля разом і формують результат конвертації: перші два задають масштаб (базу для rem та контекст для em), а третє — саме число, яке потрібно перевести між одиницями.
Коли ви редагуєте будь-яке з цих полів, два інші оновлюються просто під час набору тексту — саме про це попереджає підказка на сторінці: «Введіть значення в px, rem або em — інші два поля оновляться автоматично під час введення.» У полі значень можна вводити і від'ємні пікселі. А ось базовий розмір шрифту і контекстний розмір шрифту для em обов'язково мають бути числами, більшими за нуль, — інакше конвертація зупиняється (докладніше про повідомлення про помилки — нижче).
На старті, поки жодне поле не змінене, 16px дорівнює 1rem і дорівнює 1em — це початковий стан обох полів розміру шрифту.
Результати: конвертовані значення та таблиця популярних величин
У відповідь інструмент показує заданий вами базовий розмір шрифту, заданий контекстний розмір шрифту для em і саме значення, конвертоване одразу між усіма трьома одиницями — сторінка так і підтверджує: «Конвертовано між усіма трьома одиницями».
Наприклад, якщо залишити базовий розмір шрифту і контекстний розмір за замовчуванням (по 16px кожен) і ввести в поле «Значення» число 32 (px), поля rem та em одразу покажуть 2 — бо за цих початкових налаштувань 16px відповідає рівно 1rem і 1em.
Разом зі значенням інструмент повертає й самі поля базового та контекстного розмірів шрифту — так ви одразу бачите, за яких налаштувань отримано результат, а не тільки саме число.
Окремо на сторінці є таблиця «Популярні значення px → rem (база 16px)» — вона показує, як поширені пікселі значення переводяться в rem саме за базового розміру шрифту 16px, тож можна швидко звірити типові величини, не вводячи їх вручну щоразу.
Коли інструмент показує повідомлення про помилку
Якщо в поле «Значення» потрапляє щось, що не є числом, з'являється повідомлення «Введіть число для конвертації.»
Якщо базовий розмір шрифту не є числом, більшим за нуль, конвертер повідомляє: «Базовий розмір шрифту (root) має бути числом, більшим за 0.»
Якщо контекстний розмір шрифту для em не є числом, більшим за нуль, з'являється повідомлення: «Контекстний розмір шрифту em має бути числом, більшим за 0.»
Обробка даних і конфіденційність
Усі обчислення виконуються у вашому браузері. Введені дані не надсилаються на BroBroGo.
Кому знадобиться цей конвертер
- Тим, кому потрібно перевести фіксовані значення в пікселях у відносні одиниці rem або em для адаптивної верстки.
- Тим, хто хоче зрозуміти, як різні значення базового розміру шрифту впливають на величину rem.
- Тим, кому потрібно порахувати em на основі розміру шрифту конкретного елемента, а не лише базового розміру сторінки.
- Тим, хто хоче переконатися, що розміри коректно масштабуються, коли читач змінює стандартний розмір шрифту.
Поширені запитання
Яка різниця між px, rem та em?
px — це фіксована довжина. rem вимірюється відносно базового (root) розміру шрифту сторінки (при базі 16px, 1rem дорівнює 16px). em вимірюється відносно розміру шрифту елемента, в якому він знаходиться. Використання rem для текстів та відступів дозволяє всьому інтерфейсу масштабуватися, коли користувач змінює стандартний розмір шрифту в налаштуваннях браузера.
Навіщо потрібен окремий контекстний розмір em?
Одиниця em розраховується відносно розміру шрифту власного елемента, який не завжди збігається з базовим (root). Вкажіть у полі контексту em розмір шрифту цього батьківського елемента для правильного розрахунку, або залиште його рівним базовому, якщо вони збігаються.
Що робити, якщо мій базовий розмір шрифту не 16px?
Змініть значення в полі базового розміру шрифту (root), щоб воно відповідало вашому CSS, і всі значення rem миттєво перерахуються. Наведена нижче таблиця є зручним орієнтиром для стандартної бази 16px, з якої починається більшість сайтів.