Конвертер px у rem і em
Переводьте пікселі CSS у rem і em миттєво, з налаштовуваними базовими розмірами шрифту.
Цей безкоштовний конвертер допомагає фронтенд-розробникам переводити значення в пікселях у одиниці rem та em для адаптивного, доступного CSS. Введіть значення в px, rem або em — інші два оновляться миттєво, на основі кореневого font-size (для rem) і font-size батьківського елемента (для em), які можна налаштувати — обидва за замовчуванням дорівнюють стандартним 16px браузера.
Використання rem і em замість фіксованих пікселів дозволяє тексту і відступам коректно масштабуватися, коли користувач змінює розмір шрифту в браузері, що важливо для доступності. rem зазвичай є кращим для більшості макетів, оскільки завжди масштабується від єдиного кореневого значення, а em корисний для відступів, які мають масштабуватися разом із font-size конкретного компонента.
Часті запитання
У чому різниця між px, rem і em?
px — абсолютна одиниця в пікселях. rem — відносно font-size кореневого елемента (html). em — відносно font-size батька поточного елемента, тому його реальне значення в пікселях може змінюватися залежно від місця використання.
Як перевести px у rem?
Поділіть значення в пікселях на кореневий font-size (зазвичай 16px). Наприклад, 24px ÷ 16px = 1,5rem.
Як перевести rem у px?
Помножте значення rem на кореневий font-size. Наприклад, 1,5rem × 16px = 24px.
Чому 16px — базовий розмір за замовчуванням?
Більшість браузерів використовують 16px як font-size за замовчуванням для елемента html, тому 1rem дорівнює 16px, якщо розробник чи користувач явно це не змінив.
Чому em іноді дає інший результат, ніж rem?
em розраховується відносно font-size батьківського елемента, а не кореня. Якщо у компонента батько з font-size, відмінним від кореневого, переведення того самого значення в px у em дасть інше число, ніж переведення в rem.
Чи варто використовувати rem чи em для розміру шрифту?
Зазвичай для розміру шрифту рекомендується rem, оскільки він залишається передбачуваним незалежно від вкладеності — кожне значення rem завжди посилається на той самий кореневий font-size, уникаючи накопичувальних ефектів.
Коли em корисніший, ніж rem?
em корисний для значень, які мають масштабуватися разом із font-size конкретного компонента, наприклад відступи всередині кнопки, які мають рости пропорційно при зміні розміру тексту кнопки.
Чи впливає зміна кореневого font-size на всі значення rem на сторінці?
Так. Оскільки кожна одиниця rem відносна до кореневого font-size, зміна цього єдиного значення пропорційно масштабує всі виміри на основі rem на сторінці.
Чому варто уникати фіксованих пікселів для тексту?
Текст із фіксованими пікселями не масштабується, коли користувач збільшує розмір шрифту за замовчуванням у браузері з міркувань доступності, що може ускладнити читання для людей, яким потрібен більший текст.
Чи можна використати цей калькулятор для базового розміру, відмінного від 16px?
Так. Змініть поля кореневого font-size і font-size батька відповідно до налаштувань вашого проєкту CSS, і результати перерахунку оновляться відповідно.