Всі інструменти Безкоштовно

Конвертуйте px, rem, em, pt і % з живою таблицею та готовим до копіювання CSS

Значення для конвертації
px
px

rem відносний до кореневого розміру шрифту; em і % відносні до батьківського.

Сконвертовані значення
px
0
rem
0
em
0
pt
0
%
0
Поширені значення
PXREMEMPT
10
12
14
16
18
20
24
28
32
40
48
64
Фрагмент CSS

						

Про Конвертер пікселів у EM/REM

Конвертер пікселів у EM/REM переводить значення довжини CSS між px, rem, em, pt і відсотками. Введіть значення в будь-якій із п’яти одиниць, і жива таблиця покаже його еквівалент в усіх інших — плюс готовий до копіювання фрагмент CSS, який можна вставити прямо в таблицю стилів.

Перетворення враховують те, як CSS насправді розв’язує одиниці: rem відносний до розміру шрифту кореневого елемента, тоді як em і % відносні до розміру шрифту батьківського елемента. Обидва базові розміри можна редагувати, тож можна змоделювати кореневий шрифт 16 px із компонентом 14 px, або будь-яку іншу шкалу дизайн-системи.

Таблиця поширених значень зіставляє розміри, до яких дизайнери звертаються найчастіше — тож питання на кшталт "скільки 24px у rem" отримують відповідь з першого погляду. Інструмент безкоштовний, оновлюється під час набору тексту й є основою для перетворення фіксованих пікселних макетів у доступний, масштабований CSS на основі rem.

Як використовувати Конвертер пікселів у EM/REM

  1. Введіть значення для перетворення й оберіть його одиницю: px, rem, em, pt або %.
  2. Скоригуйте кореневий розмір шрифту (для rem) і розмір шрифту батьківського елемента (для em і %), якщо вони відрізняються від 16 px.
  3. Перегляньте перетворені значення в живій таблиці.
  4. Скопіюйте згенерований фрагмент CSS або будь-яке значення з таблиці поширених значень.

Часті запитання

rem завжди відносний до розміру шрифту кореневого елемента (html), тоді як em відносний до успадкованого розміру шрифту поточного елемента. Вкладені значення em накопичуються, тому rem зазвичай передбачуваніший для розмітки.

При стандартному кореневому розмірі шрифту 16 px, 16 px дорівнює рівно 1 rem. Змініть поле кореневого розміру, і конвертер перерахує — при кореневому розмірі 18 px, 16 px стає приблизно 0,889 rem.

Значення rem масштабуються, коли користувачі змінюють базовий розмір шрифту браузера, зберігаючи текст читабельним для тих, кому потрібен більший шрифт. Фіксовані розміри px ігнорують цю перевагу, що шкодить доступності.

CSS визначає 1 pt як 1/72 дюйма, а 1 px як 1/96, тож 1 pt = 1,333 px і 12 pt = 16 px. Пункти здебільшого зустрічаються в стилях для друку та документах, імпортованих із текстових редакторів.

Для розміру шрифту % відносний до розміру шрифту батьківського елемента, так само як em: 100% дорівнює розміру батьківського елемента, тож 87,5% від батьківського розміру 16 px становить 14 px. Задайте поле розміру батьківського елемента відповідно до вашого контексту.

Поділитися

Популярні запити
конвертер px у rem конвертер px у em пікселі в rem rem у px конвертер одиниць css калькулятор px em rem
Потрібна допомога?
Виникла проблема з цим інструментом? Повідомте нас.
Повідомити про проблему

Додайте цей безкоштовний інструмент на власний вебсайт — скопіюйте та вставте код нижче.