Конвертер PX в REM — пересчёт CSS-единиц онлайн
Пиксели
16px REM
1rem EM
1em | Пиксели | REM |
|---|
Введите значение в px, rem или em — и получите эквивалент сразу во всех трёх единицах с учётом корневого размера шрифта, который вы задаёте сами. Ниже — живая таблица rem-эквивалентов для типичных пиксельных размеров: удобно при переводе макета с фиксированных пикселей на масштабируемые единицы.
Как это работает
- 1 Введите значение Наберите число и выберите его единицу — px, rem или em. Две другие единицы пересчитываются по мере ввода.
- 2 Задайте корневой размер шрифта По умолчанию 16px — стандарт браузеров. Измените его, если ваш стиль задаёт другой font-size на элементе html (например, 62.5% для базы 10px).
- 3 Пользуйтесь таблицей Под конвертером — таблица rem-эквивалентов для частых пиксельных размеров (от 1px до 128px) при выбранной базе. Значения можно копировать прямо в CSS.
Ваши данные защищены
Всё обрабатывается прямо в вашем браузере. Никакие файлы или текст не отправляются на наши серверы. Отключите интернет — инструмент продолжит работать.
Часто задаваемые вопросы
- Как перевести px в rem?
- Разделите значение в пикселях на корневой размер шрифта. При стандартной базе 16px: 24px ÷ 16 = 1.5rem. Инструмент делает это автоматически для любой базы.
- Чем rem отличается от em?
- rem считается от размера шрифта корневого элемента (html), поэтому 1.5rem одинаков по всей странице. em считается от размера шрифта текущего элемента и накапливается при вложенности. Конвертер предполагает, что размер элемента равен корневому — если элемент наследует другой размер, фактический em будет отличаться.
- Зачем использовать rem вместо px?
- rem масштабируется вместе с настройкой размера шрифта в браузере пользователя: текст и отступы растут, когда человек увеличивает шрифт по умолчанию. Это важно для доступности. px остаётся фиксированным независимо от настроек.
- Что за приём с 62.5%?
- Правило html { font-size: 62.5% } делает 1rem равным 10px (62.5% от 16px) — считать в уме проще: 1.6rem = 16px. Задайте в инструменте корневой размер 10, чтобы работать в этой системе.
- Какие rem-значения у классов Tailwind?
- Шкала отступов Tailwind построена на rem при базе 16px: p-4 — это 1rem (16px), text-sm — 0.875rem (14px), а шаг шкалы равен 0.25rem (4px). Таблица покрывает всю шкалу.
Из блога
PX в REM: как устроен пересчёт и зачем он нужен Математика перевода px в rem, подводные камни em и почему базой веба стали именно 16 пикселей. Читать статью →Похожие инструменты
Генератор border-radius Визуальный конструктор скруглённых углов с превью. Конвертер цветов Преобразование цветов между HEX, RGB, HSL и HSV. Генератор CSS-градиентов Визуальный конструктор линейных и радиальных градиентов. Калькулятор соотношения сторон Подбор размеров при масштабировании прямоугольника.