Конвертер rem у пікселі (px)
Один rem дорівнює 16 px за типового розміру шрифту в браузері, тож 1,5 rem дорівнює 24 px. Розрахунок складається з одного множення: значення в rem помножене на базовий розмір шрифту. Введіть значення в перше поле, а якщо ваша сторінка має іншу базу, впишіть її в поле Базовий font-size.
Що таке rem і що таке піксель у CSS?
rem — це відносна одиниця довжини в CSS. Її значення дорівнює обчисленому розміру шрифту кореневого елемента сторінки, тобто елемента html[1]. Якщо розмір шрифту html становить 16 px, кожен rem на сторінці дорівнює 16 px. Коли цей розмір змінюється, разом із ним змінюються всі розміри, записані в rem.
Піксель (px) у CSS — стала одиниця, яку стандарт визначає як 1/96 дюйма[1]. Тому дюйм у CSS дорівнює 96 px, і конвертер дюймів у px відкривається з типовою роздільною здатністю 96 пікселів на дюйм. У загальному значенні піксель — це найдрібніша одиниця цифрового зображення в растровій графіці[2]. Піксель у CSS не змінюється, коли читач змінює розмір шрифту в браузері. Програми для дизайну, як-от Figma, теж показують розміри в пікселях, тому переведення rem у пікселі допомагає звірити таблицю стилів із макетом.
:root на HTML-сторінці вказує на сам елемент html, тому розмір шрифту, записаний тут, стає базою для кожного значення rem. У видимій частині фото селектор містить змінні кольорів і не задає розміру шрифту, тож база лишається такою, як у браузері. Фото: Pankaj Patel, Unsplash.Скільки пікселів у 1 rem?
1 rem дорівнює 16 px, поки базовий розмір шрифту має типове значення, а в Chrome, Edge і Firefox воно становить 16 px. Формула складається з одного множення: px = rem × базовий розмір шрифту. Отже, 1,5 rem дорівнює 24 px. А 0,875 rem дорівнює 14 px, і це розмір тексту text-sm у Tailwind CSS[3].
Число 16 є лише типовим значенням, і змінити його можна з двох боків. Перший бік — таблиця стилів: правило html { font-size: 62.5% } робить базу 10 px, тож 1,5 rem стає 15 px. Другий бік — сам читач. Коли ми вибрали Великий у списку Розмір шрифту в налаштуваннях Chrome, розмір шрифту елемента html став 20 px, і 1 rem теж став 20 px.
Тому в конвертері є третє поле для бази. Впишіть туди базу, яку використовує ваша сторінка, і отримаєте пікселі, які бачить її читач. Якщо бази не знаєте, почніть із числа 16, яке вже стоїть у полі, коли конвертер відкривається, адже це типове значення трьох браузерів.
Як перевести rem у px? Формула і приклад
Формула має вигляд px = rem × font-size, де font-size означає розмір шрифту елемента html. Візьмімо для прикладу відступ 1,25 rem. За типової бази 16 px він дає 1,25 × 16 = 20 px. За бази 20 px той самий відступ становить 25 px.
Техніка 62,5% задає розмір шрифту html на рівні 62,5% від типового, тож база стає 10 px, адже 62,5% від 16 дорівнює 10. Тоді значення читаються одразу: 2,4 rem дорівнює 24 px. Якщо читач збільшить розмір шрифту в браузері до 20 px, база стане 12,5 px, а 2,4 rem дорівнюватиме 30 px. Поле Базовий font-size у конвертері приймає відсоток так, як ви пишете його в таблиці стилів, і рахує його від 16 px. Впишіть 62,5%, і конвертер працюватиме з базою 10 px.
Та сама формула працює у зворотному напрямку через ділення, і саме це робить конвертер px у rem. Одиницю em рахують від розміру шрифту батьківського елемента, і для неї є конвертер em у px з полем для розміру батьківського елемента. Якщо розмір записано в пунктах (pt), одиницях розміру шрифту в текстових редакторах, спершу переведіть його в пікселі в конвертері pt у px.
14px, потім 0.875rem. Другий рядок стоїть після першого, тож браузер застосовує 0.875rem. За бази 16 px результат лишається 14 px, адже 0,875 × 16 = 14. За бази 20 px текст стає 17,5 px. Фото: Nick Karvounis, Unsplash.Таблиця переведення rem у px за трьох базових розмірів
| Значення в rem | За 16 px (типово) | За 10 px (62,5%) | За 20 px (Великий) |
|---|---|---|---|
| 0,125 rem | 2 px | 1,25 px | 2,5 px |
| 0,25 rem | 4 px | 2,5 px | 5 px |
| 0,375 rem | 6 px | 3,75 px | 7,5 px |
| 0,5 rem | 8 px | 5 px | 10 px |
| 0,625 rem | 10 px | 6,25 px | 12,5 px |
| 0,75 rem | 12 px | 7,5 px | 15 px |
| 0,8 rem | 12,8 px | 8 px | 16 px |
| 0,875 rem | 14 px | 8,75 px | 17,5 px |
| 0,9 rem | 14,4 px | 9 px | 18 px |
| 1 rem | 16 px | 10 px | 20 px |
| 1,1 rem | 17,6 px | 11 px | 22 px |
| 1,125 rem | 18 px | 11,25 px | 22,5 px |
| 1,2 rem | 19,2 px | 12 px | 24 px |
| 1,25 rem | 20 px | 12,5 px | 25 px |
| 1,3 rem | 20,8 px | 13 px | 26 px |
| 1,375 rem | 22 px | 13,75 px | 27,5 px |
| 1,4 rem | 22,4 px | 14 px | 28 px |
| 1,5 rem | 24 px | 15 px | 30 px |
| 1,6 rem | 25,6 px | 16 px | 32 px |
| 1,625 rem | 26 px | 16,25 px | 32,5 px |
| 1,75 rem | 28 px | 17,5 px | 35 px |
| 1,8 rem | 28,8 px | 18 px | 36 px |
| 1,875 rem | 30 px | 18,75 px | 37,5 px |
| 2 rem | 32 px | 20 px | 40 px |
| 2,25 rem | 36 px | 22,5 px | 45 px |
| 2,5 rem | 40 px | 25 px | 50 px |
| 2,75 rem | 44 px | 27,5 px | 55 px |
| 3 rem | 48 px | 30 px | 60 px |
| 3,5 rem | 56 px | 35 px | 70 px |
| 3,75 rem | 60 px | 37,5 px | 75 px |
| 4 rem | 64 px | 40 px | 80 px |
| 4,5 rem | 72 px | 45 px | 90 px |
| 5 rem | 80 px | 50 px | 100 px |
| 6 rem | 96 px | 60 px | 120 px |
| 8 rem | 128 px | 80 px | 160 px |
| 10 rem | 160 px | 100 px | 200 px |
| 16 rem | 256 px | 160 px | 320 px |
| 20 rem | 320 px | 200 px | 400 px |
| 32 rem | 512 px | 320 px | 640 px |
Скільки пікселів у розмірах шрифту Tailwind CSS?
| Клас Tailwind | Значення в rem | Пікселі за 16 | Пікселі за 20 |
|---|---|---|---|
| text-xs | 0,75 rem | 12 px | 15 px |
| text-sm | 0,875 rem | 14 px | 17,5 px |
| text-base | 1 rem | 16 px | 20 px |
| text-lg | 1,125 rem | 18 px | 22,5 px |
| text-xl | 1,25 rem | 20 px | 25 px |
| text-2xl | 1,5 rem | 24 px | 30 px |
| text-3xl | 1,875 rem | 30 px | 37,5 px |
| text-4xl | 2,25 rem | 36 px | 45 px |
| text-5xl | 3 rem | 48 px | 60 px |
| text-6xl | 3,75 rem | 60 px | 75 px |
| text-7xl | 4,5 rem | 72 px | 90 px |
| text-8xl | 6 rem | 96 px | 120 px |
| text-9xl | 8 rem | 128 px | 160 px |
Яку базу задає кожен варіант списку Розмір шрифту в Chrome і Edge?
| Варіант у Chrome | Варіант в Edge | База, тобто 1 rem | 0,875 rem | 1,5 rem | 2 rem |
|---|---|---|---|---|---|
| Дуже малий | Дуже малий розмір шрифту | 9 px | 7,88 px | 13,5 px | 18 px |
| Малий | Малий розмір шрифту | 12 px | 10,5 px | 18 px | 24 px |
| Середній (рекомендовано) | Середній (рекомендований) розмір шрифту | 16 px | 14 px | 24 px | 32 px |
| Великий | Великий розмір шрифту | 20 px | 17,5 px | 30 px | 40 px |
| Дуже великий | Дуже великий розмір шрифту | 24 px | 21 px | 36 px | 48 px |
Які записи приймає й обчислює цей конвертер?
| Що ви вводите або вставляєте | Розрахунок конвертера | Що відбувається з цим записом |
|---|---|---|
| Перше поле: значення в rem, база 16 px | ||
| 1,5 | 24 px | Десяткова кома, як пишуть числа українською: 1,5 множимо на 16. |
| 1.5 | 24 px | Крапку читаємо як десятковий знак, як у CSS. |
| 1.875rem | 30 px | Значення, скопійоване з CSS разом з rem, читаємо як десятковий дріб 1,875 rem, бо CSS записує дроби через крапку. Під полем з’явиться підказка з другим можливим прочитанням, 1875. |
| 1.875 | 30 px | Без одиниці єдину крапку в числі ми теж читаємо як десятковий знак, тож це ті самі 1,875 rem. Під полем з’явиться підказка, а тисячу вісімсот сімдесят п’ять rem введіть як 1875 або 1 875. |
| 1,5куь | 24 px | Слово rem, набране на українській розкладці без перемикання мови, стає «куь»: беремо число, а літери пропускаємо. |
| .875rem | 14 px | Значення зі стиснутого файлу CSS, без нуля перед крапкою: читаємо його як 0,875 і пропускаємо слово rem. |
| font-size: 1.5rem; | 24 px | Цілий рядок із таблиці стилів: беремо число, а назву властивості й крапку з комою пропускаємо. |
| --text-sm: 0.875rem; | 14 px | Рядок зі змінних теми Tailwind CSS: два дефіси на початку назви змінної не вважаються мінусом. |
| margin-top: -0.5rem; | -8 px | Від’ємний відступ із таблиці стилів: мінус, що стоїть упритул до числа, враховуємо, тож результат виходить від’ємним. |
| 3/4 | 12 px | Простий дріб: 3 поділити на 4 дає 0,75 rem. |
| Поле «Базовий font-size»: конвертер обчислює базу | ||
| 62,5% | 10 px | Відсоток із десятковою комою: рахується від типової бази 16 px, а 62,5% від 16 дорівнює 10. |
| 62.5% | 10 px | Відсоток із крапкою, як у CSS: результат той самий. |
| 125% | 20 px | Відсоток понад 100%: 125% від 16 дорівнює 20, як і база, яку дає варіант Великий у Chrome. |
| font-size: 20px | 20 px | Рядок, скопійований з інструментів розробника: беремо число, а назву властивості й одиницю пропускаємо. |
| 18,5 | 18,5 px | База з дробовою частиною після коми, яку поле приймає, поки вона лежить між 1 і 100. |
Як змінити базовий розмір шрифту в Chrome, Edge, Firefox і Safari?
У Chrome, Edge і Firefox розмір, який вибирає читач, стає базою кожного значення rem на сторінках, які він відкриває. Назви параметрів подано так, як вони виглядають в українському інтерфейсі кожного браузера.
Chrome
Відкрийте Налаштування, потім Стиль і тема, і виберіть розмір у списку Розмір шрифту. Кнопка Налаштувати шрифти відкриває сторінку з повзунками Розмір шрифту та Мінімальний розмір шрифту.Edge
Відкрийте Параметри, потім Оформлення й Шрифти, і виберіть розмір у списку Розмір шрифту. Назви варіантів закінчуються словами «розмір шрифту», а середнім є варіант Середній (рекомендований) розмір шрифту. Під списком розташований Мінімальний розмір шрифту.Firefox
Відкрийте Налаштування, потім Доступність, і в розділі Шрифти виберіть число у списку Розмір шрифту. Firefox зберігає цей розмір окремо для кожної системи письма й визначає систему сторінки за атрибутомlang. Під час нашого вимірювання ми задали для кирилиці 19 px: на сторінці зlang="uk"1 rem став 19 px, а на сторінці безlangлишився 16 px. Кнопка Розширені налаштування відкриває вікно Шрифти зі списком Шрифти для і полем Мінімальний розмір шрифту.Safari на Mac
У меню Safari виберіть Параметри й натисніть Експертні. Тут Safari задає лише нижню межу: увімкніть Не використовувати шрифти, менші за, і виберіть число. Apple радить спробувати 12 або 14[4].
Чому розміри тексту записують у rem?
Текст у rem збільшується, коли читач збільшує розмір шрифту в браузері, а текст у пікселях лишається тим самим. Про це йдеться в критерії успішності 1.4.4 «Зміна розміру тексту» Настанов з доступності вебвмісту (WCAG). Його текст в авторизованому українському перекладі: «За винятком супровідних написів і зображень тексту, розмір тексту можна змінювати без допоміжних технологій (масштаб змін — до 200 відсотків) без втрати вмісту або функціональності.»[5] Переведення в пікселі допомагає звіряти результат із макетом, а таблиця стилів лишається в rem.
Пікселі: переведення з інших одиниць
Джерела
- CSS Values and Units Module Level 4 — W3C
- Піксель — Вікіпедія
- font-size — Tailwind CSS
- Змінення експертних параметрів у Safari на Mac — Apple
- Настанови з доступності вебвмісту (WCAG) 2.1 — W3C, переклад ПРООН в Україні
- <length> CSS type — MDN Web Docs
Усі значення в таблицях ми обчислили з визначень одиниць і перед публікацією перевірили розрахунком. Історичні дані та назви місцевих одиниць спираються на джерела, наведені вище.
Зміст востаннє перевірено: · підготувала й перевірила команда Arteon
Часті запитання про переведення rem у px
Чи завжди 1 rem дорівнює 16 px?
1 rem дорівнює 16 px, поки базовий розмір шрифту має типове значення[6]. Якщо сторінка задасть елементу html інший розмір або читач змінить розмір шрифту в браузері, зміниться й 1 rem. Наприклад, з варіантом Великий у Chrome 1 rem стає 20 px.
Скільки пікселів у 1,5 rem?
1,5 rem дорівнює 24 px за типової бази 16 px. За бази 10 px це 15 px, а за бази 20 px — 30 px.
Скільки пікселів у 2 rem і в 0,5 rem?
За бази 16 px 2 rem дорівнює 32 px, а 0,5 rem дорівнює 8 px. Обидва значення змінюються разом із базою: за бази 20 px 2 rem стає 40 px, а 0,5 rem стає 10 px.
Чим rem відрізняється від em?
rem завжди рахують від розміру шрифту елемента html, тож його значення однакове на всій сторінці. em рахують від розміру шрифту батьківського елемента, тому 1.5em усередині елемента з розміром шрифту 20 px дорівнює 30 px. Для переведення em скористайтеся конвертером em у px.
Чи змінює масштабування сторінки значення 1 rem?
Під час нашого вимірювання в Chrome 1 rem лишився 16 px після масштабування сторінки до 125%. Масштабування сторінки збільшує весь вміст разом, і те, що записано в rem, і те, що записано в пікселях. Зміна розміру шрифту змінює лише значення rem.
Чи змінює мінімальний розмір шрифту розрахунок rem?
Під час нашого вимірювання в Chrome і Firefox не змінював. Ми задали мінімальний розмір 12 px на сторінці з html { font-size: 62.5% }. 2,4 rem лишилося 24 px, тобто rem і далі рахувався від бази 10 px.
Як дізнатися базовий розмір сайту?
Відкрийте інструменти розробника в Chrome, виберіть елемент html на панелі Елементи, відкрийте вкладку Обчислено й знайдіть font-size. Число, яке ви там побачите, і є базою, від якої зараз рахується rem на цій сторінці, коли налаштування сайту й налаштування читача вже поєднано.
Чи використовує Tailwind CSS одиниці rem?
Так, розміри шрифту в Tailwind CSS записано в rem. Клас text-base дорівнює 1 rem, тобто 16 px за типової бази, а клас text-2xl дорівнює 1,5 rem, тобто 24 px.
Чому результат виходить дробовим, наприклад 17,5 px?
Множення на базу, відмінну від 16, може дати дріб: 0,875 rem за бази 20 px дорівнює 17,5 px. Конвертер показує щонайбільше два знаки після коми, а браузер приймає такі частки пікселя на сторінці.
Допоможіть нам покращити наші інструменти
Знайшли значення, яке у вашому браузері дає інший результат, або маєте ідею для конвертера? Напишіть нам.