Конвертер px в rem

Як користуватися конвертером px в rem

1. Задайте Базовий розмір шрифту (px). У кожному основному браузері він дорівнює 16, якщо ваша таблиця стилів його не змінює. Кнопки під полем перемикають на 16 px, 10 px (прийом html { font-size: 62.5%; }) або 18 px.
2. Якщо ви працюєте з em, задайте Розмір шрифту батьківського елемента для em (px): обчислений розмір шрифту елемента, який містить той, що ви стилізуєте.
3. У розділі Конвертувати значення введіть число в Пікселі (px), REM або EM. Два інші поля оновлюються під час введення, а рядок нижче показує використане ділення.
4. Таблиця масової конвертації містить поширені розміри. Замініть Значення в пікселях власними дизайн-токенами (шкала відступів, шкала типографіки…) і скористайтеся Копіювати таблицю, щоб вставити результат в електронну таблицю чи дизайнерський документ.
5. Щоб перенести наявний код, вставте його в CSS для конвертації, виберіть параметри й натисніть Конвертувати px в rem. Завантажити приклад показує невелику таблицю стилів. Скопіюйте Перетворений CSS кнопкою Копіювати.

Конвертація виконується повністю у вашому браузері. Нічого з того, що ви вводите чи вставляєте, не надсилається на сервер.

Формули

• rem = px ÷ кореневий розмір шрифту. За типових 16 px: 24px = 24 ÷ 16 = 1,5rem.
• em = px ÷ розмір шрифту батьківського елемента. Усередині заголовка 20 px значення 10px = 0,5em.
• px = rem × кореневий розмір шрифту, а px = em × розмір шрифту батьківського елемента.

rem чи em: що вибрати?

rem («root em») завжди посилається на розмір шрифту елемента html, тому 1.5rem означає те саме на всій сторінці. Це найнадійніший вибір для розмірів шрифту, відступів, максимальної ширини й проміжків макета.

em посилається на розмір шрифту самого елемента (для font-size – батьківського). Він накопичується: список розміром 0,9em, тричі вкладений, закінчується на 0,9 × 0,9 × 0,9 = 73 % від бази. Тому em зручний для речей, які мають масштабуватися разом із власним текстом (відступ кнопки, розмір піктограми біля підпису) і ризикований для глобальної типографіки.

Чому rem важливий для доступності

Багато людей збільшують типовий розмір шрифту в налаштуваннях браузера (наприклад, з 16 до 20 або 24 px) замість масштабування кожної сторінки. Розміри в px ігнорують це налаштування, а розміри в rem чи em йому підпорядковуються. Використання rem для тексту й відступів дозволяє всьому макету зростати разом із вибором читача, що допомагає виконати критерій успіху WCAG 2.2 1.4.4 (зміна розміру тексту до 200 %).

З тієї самої причини не задавайте html { font-size: 16px; } у px: використовуйте відсоток (100% або 62.5%, якщо хочете 1rem = 10px), щоб налаштування користувача й надалі діяло.

Що змінює конвертер CSS

Він замінює числа з px у оголошеннях на значення, поділене на кореневий розмір шрифту. Коментарі, рядки й значення url() він ніколи не чіпає.

• Залишити ширину рамок і контурів у px: border, border-*-width, outline, outline-offset і column-rule залишаються в px, тож тонкі лінії лишаються чіткими. border-radius усе одно перетворюється.
• Залишити значення 1px: будь-яке значення від −1px до 1px лишається без змін.
• Перетворити медіазапити на em (база 16px): в умовах @media rem і em завжди посилаються на початковий розмір шрифту браузера, ніколи на ваше правило html, тому інструмент ділить на 16 і пише там em незалежно від вашого кореневого розміру. Якщо позначку знято, медіазапити зберігають px.