Як користуватися
- Задайте розмір кореневого шрифту, якщо ваш сайт його змінює (наприклад, html { font-size: 62.5% } задає розмір 10px).
- Введіть значення в будь-яке поле, щоб перетворити px на rem або rem на px. Перемкніться на em, якщо одиниці залежать від батьківського елемента.
- Швидко знаходьте потрібні значення в таблиці або вставте фрагмент CSS, щоб перетворити всі значення px одразу й скопіювати результат.
Як це працює
rem = px ÷ розмір шрифту кореневого елемента. За стандартного розміру кореневого шрифту 16px значення 24px дорівнює 1.5rem, а 14px — 0.875rem. Для em використовується та сама формула, але з розміром шрифту батьківського елемента. Саме тому значення em у вкладених елементах множаться; rem цього не спричиняє, оскільки завжди відноситься до кореневого елемента.
Якщо задавати розміри шрифту й відступи в rem, текст масштабуватиметься, коли користувач збільшить стандартний розмір шрифту в налаштуваннях браузера. Це допомагає людям зі слабким зором. Значення округлюються до чотирьох знаків після коми.
Конвертер фрагментів CSS змінює числа з суфіксом px. Він не змінює коментарі, url(…) і рядки в лапках, зберігає 1px, якщо ви цього бажаєте (тонкі межі зазвичай мають залишатися 1px), записує 0px як 0, а також за замовчуванням не змінює умови @media і @container. У медіазапитах rem і em завжди відносяться до початкового розміру шрифту браузера, незалежно від заданого вами розміру кореневого шрифту. Конвертер не враховує семантику calc(), а лише замінює числа px всередині неї. Це коректно, оскільки кожна величина перетворюється окремо.
Приклади
Стандартний розмір кореневого шрифту
За розміру кореневого шрифту 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
Прийом із 62.5%
Якщо у вашому CSS задано html { font-size: 62.5% }, розмір кореневого шрифту становитиме 10px, тож 14px = 1.4rem, а 24px = 2.4rem. Щоб це врахувати, задайте в полі розміру кореневого шрифту значення 10.
Перетворення стилів компонента
Якщо ввімкнути параметр «Залишати значення 1px», padding: 24px 16px; border: 1px solid #ddd; буде перетворено на padding: 1.5rem 1rem; border: 1px solid #ddd;.
Поширені запитання
Що використовувати: rem чи em?
Для більшості розмірів шрифту, відступів і компонування використовуйте rem — його поведінка передбачувана. Використовуйте em, коли потрібно, щоб розмір залежав від розміру шрифту самого компонента, наприклад для внутрішніх відступів кнопки.
Чому не перетворюються значення в медіазапитах на rem?
Можна, але в медіазапиті 1rem завжди дорівнює стандартному розміру шрифту браузера (зазвичай 16px), а не розміру шрифту html. Тому за замовчуванням конвертер пропускає такі значення. Вимкніть цей параметр, якщо все одно ділите на 16.
Чи доступніший rem за px?
Для розмірів шрифту — так: rem враховує стандартний розмір шрифту, заданий користувачем, а px — ні. Масштабування сторінки в браузері працює з обома одиницями.
Конфіденційність
Перетворення та фрагмент CSS обробляються у вашому браузері й нікуди не надсилаються.