Конвертер пікселів (px) у rem
Розмір 24 px дорівнює 1,5 rem за типової бази 16 px, а 14 px дорівнює 0,875 rem. Розрахунок складається з одного ділення: розмір у пікселях поділений на базовий розмір шрифту. Введіть розмір із макета в перше поле, а якщо ваша сторінка має іншу базу, впишіть її в поле Базовий font-size.
Що таке rem і чому розміри в пікселях записують у rem?
Макети дають розміри в пікселях: заголовок 28 px, відстань між розділами 32 px. Піксель у CSS — стала одиниця, яку стандарт визначає як 1/96 дюйма[1]. Тому конвертер px у дюйми за своєї типової роздільної здатності рахує 96 пікселів в одному дюймі. rem є відносною одиницею: один rem дорівнює обчисленому розміру шрифту елемента html, кореневого елемента сторінки[1].
Оскільки rem завжди рахують від кореневого елемента, у вкладених елементах він не накопичується, як em, який переводить конвертер em у px. Щоб перевести будь-який розмір із пікселів у rem, досить знати розмір шрифту елемента html. Після переведення розмір іде за налаштуванням читача: заголовок 24 px лишається 24 px за типових налаштувань і стає 30 px у читача, який вибрав Великий у Chrome чи Великий розмір шрифту в Edge.
60px у правилі .hero і 220px у правилі, що об’єднує класи .heading та .sub-heading. За бази 16 px перший стає 3.75rem, другий 13.75rem, і далі обидва збільшуються разом із налаштуванням читача. Фото: Ferenc Almasi, Unsplash.Скільки rem у 24 px?
24 px дорівнюють 1,5 rem за типової бази 16 px. Формула складається з одного ділення: rem = px ÷ базовий розмір шрифту. Кожні 16 px дають 1 rem, а один піксель дорівнює 0,0625 rem. Отже, 8 px дорівнюють 0,5 rem. А 32 px дорівнюють 2 rem.
Якщо таблиця стилів має іншу базу, діліть на неї. З технікою 62,5% база стає 10 px, і 24 px дорівнюють 2,4 rem. За бази 20 px ті самі 24 px дорівнюють 1,2 rem. Впишіть базу в третє поле, і конвертер дасть значення, яке ви запишете в таблицю стилів.
Деякі розміри не діляться на 16 без остачі, тому результат показано щонайбільше з чотирма знаками після коми. Наприклад, 13 px дорівнюють 0,8125 rem, і CSS приймає це число таким, як є. Поле результату показує кому, а кнопка Копіювати результат копіює 0.8125 з крапкою, тож число можна одразу вставити й дописати після нього rem.
За якою формулою пікселі переводять у rem?
Формула має вигляд rem = px ÷ font-size, де font-size означає розмір шрифту елемента html. Візьміть заголовок 28 px із макета. За бази 16 px виходить 28 ÷ 16 = 1,75, тож у таблиці стилів ви пишете font-size: 1.75rem.
Розміри, що діляться на 4 без остачі, дають значення щонайбільше з двома знаками після коми: наприклад, 12 px дорівнюють 0,75 rem. Інші парні розміри дають три знаки, як 14 px, що дорівнюють 0,875 rem, а непарні дають чотири, як 15 px, що дорівнюють 0,9375 rem. Розмір на зразок 13,5 px дає й п’ятий знак після коми, тому результат округлюється до чотирьох знаків і дорівнює 0,8438 rem.
Для зворотного напрямку скористайтеся конвертером rem у px. Якщо вам потрібне значення відносно розміру шрифту батьківського елемента, переведіть розмір у конвертері px в em. Якщо розмір у файлі записано в пунктах (pt), спершу переведіть його в пікселі в конвертері pt у px.
font-size:13px стає 0.8125rem. А margin:16px 0 20px стає 1rem 0 1.25rem. Фото: Rahul Mishra, Unsplash.Таблиця переведення px у rem за трьох базових розмірів
| Розмір у пікселях | rem за бази 16 px | rem за бази 10 px | rem за бази 20 px |
|---|---|---|---|
| 1 px | 0,0625 rem | 0,1 rem | 0,05 rem |
| 2 px | 0,125 rem | 0,2 rem | 0,1 rem |
| 4 px | 0,25 rem | 0,4 rem | 0,2 rem |
| 6 px | 0,375 rem | 0,6 rem | 0,3 rem |
| 8 px | 0,5 rem | 0,8 rem | 0,4 rem |
| 10 px | 0,625 rem | 1 rem | 0,5 rem |
| 11 px | 0,6875 rem | 1,1 rem | 0,55 rem |
| 12 px | 0,75 rem | 1,2 rem | 0,6 rem |
| 13 px | 0,8125 rem | 1,3 rem | 0,65 rem |
| 14 px | 0,875 rem | 1,4 rem | 0,7 rem |
| 15 px | 0,9375 rem | 1,5 rem | 0,75 rem |
| 16 px | 1 rem | 1,6 rem | 0,8 rem |
| 17 px | 1,0625 rem | 1,7 rem | 0,85 rem |
| 18 px | 1,125 rem | 1,8 rem | 0,9 rem |
| 20 px | 1,25 rem | 2 rem | 1 rem |
| 22 px | 1,375 rem | 2,2 rem | 1,1 rem |
| 24 px | 1,5 rem | 2,4 rem | 1,2 rem |
| 25 px | 1,5625 rem | 2,5 rem | 1,25 rem |
| 26 px | 1,625 rem | 2,6 rem | 1,3 rem |
| 28 px | 1,75 rem | 2,8 rem | 1,4 rem |
| 30 px | 1,875 rem | 3 rem | 1,5 rem |
| 32 px | 2 rem | 3,2 rem | 1,6 rem |
| 36 px | 2,25 rem | 3,6 rem | 1,8 rem |
| 40 px | 2,5 rem | 4 rem | 2 rem |
| 44 px | 2,75 rem | 4,4 rem | 2,2 rem |
| 48 px | 3 rem | 4,8 rem | 2,4 rem |
| 50 px | 3,125 rem | 5 rem | 2,5 rem |
| 56 px | 3,5 rem | 5,6 rem | 2,8 rem |
| 60 px | 3,75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6,4 rem | 3,2 rem |
| 72 px | 4,5 rem | 7,2 rem | 3,6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9,6 rem | 4,8 rem |
| 100 px | 6,25 rem | 10 rem | 5 rem |
| 120 px | 7,5 rem | 12 rem | 6 rem |
| 128 px | 8 rem | 12,8 rem | 6,4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19,2 rem | 9,6 rem |
| 200 px | 12,5 rem | 20 rem | 10 rem |
| 256 px | 16 rem | 25,6 rem | 12,8 rem |
| 320 px | 20 rem | 32 rem | 16 rem |
| 400 px | 25 rem | 40 rem | 20 rem |
Як записати в rem рядки з таблиці стилів?
| Рядок у пікселях | rem за бази 16 px | rem за бази 10 px (62,5%) |
|---|---|---|
| font-size: 16px | 1rem | 1.6rem |
| font-size: 14px | 0.875rem | 1.4rem |
| font-size: 28px | 1.75rem | 2.8rem |
| padding: 12px 24px | 0.75rem 1.5rem | 1.2rem 2.4rem |
| margin-bottom: 32px | 2rem | 3.2rem |
| border-radius: 8px | 0.5rem | 0.8rem |
| max-width: 1200px | 75rem | 120rem |
| @media (min-width: 768px) | 48rem | 48rem |
@media (min-width: 48rem) почало діяти за ширини 768 px. Коли ми збільшили розмір шрифту в браузері до 20 px, воно почало діяти за ширини 960 px.Які записи приймає й обчислює конвертер px у rem?
| Що ви вводите або вставляєте | Розрахунок конвертера | Що відбувається з цим записом |
|---|---|---|
| Перше поле: розмір у пікселях, база 16 px | ||
| 24 | 1,5 rem | Лише число, як розмір виглядає на панелі вимірювань програми для дизайну. |
| 24px | 1,5 rem | Одиниця впритул до числа: читаємо число, а px пропускаємо. |
| 24 пікселі | 1,5 rem | Одиниця записана українською через пробіл: беремо число, а слово пропускаємо. |
| 24зч | 1,5 rem | Слово px, набране на українській розкладці без перемикання мови, стає «зч»: беремо число. |
| 13,5 | 0,8438 rem | Розмір із десятковою комою: результат видно з чотирма знаками після коми після округлення. |
| 1 200 | 75 rem | Нерозривний пробіл між тисячами, як пишуть великі числа українською: розмір становить тисячу двісті пікселів. |
| 1,200 | 0,075 rem | Кому на цій сторінці читаємо як десятковий знак, навіть якщо за нею три цифри, тож розмір становить 1,2 px, а під полем з’явиться підказка. Для тисячі двохсот напишіть 1200 або 1 200. |
| padding: 20px; | 1,25 rem | Цілий рядок із таблиці стилів: беремо число, а назву властивості й крапку з комою пропускаємо. |
| −8px | -0,5 rem | Типографський мінус «−» перед числом читаємо як від’ємний знак, як у від’ємному відступі. |
| Поле «Базовий font-size»: конвертер обчислює базу | ||
| 62,5% | 10 px | Відсоток, як ви пишете його для елемента html: 62,5% від типової бази 16 px дорівнює 10. |
| font-size: 18px | 18 px | Рядок, скопійований із таблиці стилів: беремо 18 як базу. |
Як перевести розміри з Figma або цілу таблицю стилів з px у rem?
Для кількох розмірів вистачить конвертера. Коли розмірів багато, програми для дизайну та інструменти збирання можуть обчислити rem самостійно.
Розмір із макета
Скопіюйте розмір у пікселях із панелі вимірювань і вставте його в перше поле. Якщо сторінка задає розмір шрифту для елемента html, впишіть його в поле Базовий font-size, перш ніж копіювати результат.Dev Mode у Figma
На платних тарифах Dev Mode одразу показує розміри в rem. Назви тут подано англійською, як в інтерфейсі Figma. У розділі Code панелі Inspect натисніть Inspect settings поруч із меню мови й виберіть одиницю rem. Щоб змінити базу, виберіть там само Set unit scale… і впишіть базу у вікні Unit scale.Функція в Sass
Sass ділить числа функцієюmath.div()з модуляsass:math[3]. Функція@function rem($px) { @return math.div($px, 16px) * 1rem; }робитьrem(24px)рівним1.5rem.PostCSS для цілої таблиці стилів
Плагін postcss-pxtorem переводить px у rem у файлах CSS під час збирання[4]. Його типова база становить 16, і з типовими налаштуваннями він переводить лише властивості шрифту: font, font-size, line-height і letter-spacing. Медіазапити лишаються в пікселях.
Пікселі: переведення в інші одиниці
Джерела
- CSS Values and Units Module Level 4 — W3C
- Media Queries Level 4 — W3C
- sass:math — Sass
- postcss-pxtorem — GitHub
- <length> CSS type — MDN Web Docs
- Настанови з доступності вебвмісту (WCAG) 2.1 — W3C, переклад ПРООН в Україні
Усі значення в таблицях ми обчислили з визначень одиниць і перед публікацією перевірили розрахунком. Історичні дані та назви місцевих одиниць спираються на джерела, наведені вище.
Зміст востаннє перевірено: · підготувала й перевірила команда Arteon
Часті запитання про переведення px у rem
Скільки rem у 16 px?
16 px дорівнюють 1 rem за типової бази 16 px. З технікою 62,5%, тобто за бази 10 px, вони дорівнюють 1,6 rem.
Скільки rem у 14 px і в 12 px?
За бази 16 px 14 px дорівнюють 0,875 rem, а 12 px дорівнюють 0,75 rem.
Чи завжди 24 px дорівнюють 1,5 rem?
Це так лише за бази 16 px. Якщо сторінка задає елементу html інший розмір, діліть на нього: за бази 10 px 24 px дорівнюють 2,4 rem, а за бази 20 px дорівнюють 1,2 rem.
Чому ділимо саме на 16?
Бо 16 px є поширеним типовим розміром шрифту в браузерах, і користувач може змінити його у своїх налаштуваннях[5]. Під час нашого вимірювання саме цей розмір використовували Chrome, Edge і Firefox, доки налаштування не змінювали.
Чи змінює техніка 62,5% значення rem у медіазапитах?
Ні. Правило @media (min-width: 48rem) починає діяти від 768 px і з цією технікою, і без неї, бо rem у медіазапиті рахується від початкового значення розміру шрифту[2]. Тому межі медіазапитів переводьте, ділячи на 16.
Чим відрізняється переведення px у rem від переведення в em?
rem рахують від розміру шрифту елемента html, тож ви ділите на ту саму базу на всій сторінці. em рахують від розміру шрифту батьківського елемента, тож ви ділите на розмір батьківського елемента. Для цього розрахунку є конвертер px в em.
Чи записувати рамку 1px у rem?
Якщо рамка має лишатися завтовшки в один піксель за будь-яких налаштувань, лишіть 1px. Якщо записати 0.0625rem, у читача, який вибрав базу 20, її товщина стане 1,25 px. Плагін postcss-pxtorem теж лишає властивість border у пікселях за типових налаштувань[4].
Чи збільшується текст у rem разом із налаштуванням читача?
Так. Текст у rem збільшується разом із розміром шрифту, який читач вибирає в браузері, а текст у пікселях лишається тим самим. Критерій успішності 1.4.4 «Зміна розміру тексту» в WCAG стосується саме цього: розмір тексту можна змінювати до 200 відсотків без втрати вмісту або функціональності[6].
Допоможіть нам покращити наші інструменти
Знайшли розмір, який у вашому браузері дає інший результат, або маєте ідею для конвертера? Напишіть нам.