Что это такое
REM и PX — это единицы измерения в CSS, но работают они по-разному. PX (пиксель) — абсолютная величина, а REM (root em) — относительная, она зависит от размера шрифта корневого элемента <html>. Если в настройках браузера или в CSS задан font-size: 16px, то 1rem = 16px. Конвертер REM в PX онлайн от DarkPlay — это калькулятор, который мгновенно переводит rem в пиксели и обратно, учитывая ваш базовый размер шрифта. Вам не нужно вручную умножать или делить значения — просто введите число и получите точный результат.
Как пользоваться
- Откройте страницу конвертера на сайте DarkPlay.
- В поле «Базовый размер» укажите значение корневого шрифта (по умолчанию — 16px). Если вы используете другую настройку, например
font-size: 14px, просто поменяйте цифру. - Введите значение в REM или PX в соответствующее поле. Конвертер автоматически пересчитает второе поле.
- Для пакетной конвертации вставьте список значений (каждое с новой строки) — сервис обработает их разом.
- Скопируйте результат и используйте в своём CSS-коде или сверьтесь со справочной таблицей rem/px, которая доступна прямо на странице.
Кому и когда пригодится
- Верстальщикам и frontend-разработчикам. При адаптивной вёрстке часто используют rem для масштабирования, но макеты в Figma или Photoshop даны в пикселях. Конвертер помогает быстро перенести значения без ошибок.
- Дизайнерам интерфейсов. Когда нужно проверить, как будет выглядеть шрифт или отступ при разных базовых настройках, или объяснить разработчику, какой rem соответствует конкретному px.
- Тимлидам и код-ревьюерам. Чтобы быстро перепроверить, не «поехала» ли типографика, и убедиться, что команда использует rem px калькулятор единообразно.
- Новичкам в CSS. Тем, кто только разбирается с css единицами и хочет понять разницу между абсолютными и относительными величинами на практике.
Плюсы и ограничения
Плюсы:
- Мгновенный и точный перевод rem в px без необходимости считать в уме.
- Настраиваемый базовый размер — учитывает любые кастомные настройки шрифта.
- Пакетная обработка экономит время при работе с большими списками значений.
- Бесплатный доступ и понятный интерфейс без лишней воды.
- Справочная таблица под рукой — удобно для быстрой сверки.
Ограничения:
- Не заменяет понимания принципов работы относительных единиц — нужно знать, что такое root em.
- Результат зависит от корректно указанного базового размера; если ошибиться, значения будут неточными.
- Не учитывает другие факторы, влияющие на рендеринг (например, масштабирование браузера или DPI экрана).
Частые вопросы
Чем REM отличается от PX?
PX — это фиксированный пиксель на экране. REM всегда зависит от размера шрифта корневого элемента. Если пользователь меняет настройки шрифта в браузере, размеры в rem масштабируются, а в px — остаются неизменными. Поэтому rem удобен для доступности и адаптивности.
Какой базовый размер шрифта использовать?
Чаще всего это 16px — стандарт для большинства браузеров. Но если вы задали в CSS html { font-size: 62.5%; }, базовый станет 10px, и тогда 1rem = 10px. В конвертере можно указать любое значение, чтобы получить корректный результат.
Можно ли конвертировать не только целые числа, но и дроби?
Да, калькулятор поддерживает дробные значения. Например, 1.5rem при базе 16px превратится в 24px. Это удобно для точной настройки отступов и размеров шрифта.
Как перевести пиксели в рем, если базовый размер неизвестен?
Если вы не знаете точный базовый размер, используйте стандартное значение 16px — оно подходит для большинства проектов. Либо уточните настройки у разработчика или посмотрите в CSS-файле, какое значение задано для <html>.
Зачем нужна пакетная конвертация?
Когда вы работаете с большим макетом, где десятки размеров шрифта и отступов, вбивать каждое число по одному — трата времени. Пакетный режим позволяет вставить весь список сразу и получить готовые значения, которые останется только скопировать в код.