Конвертер PX в REM онлайн: перевод пикселей в rem

Онлайн конвертер PX в REM ✓ Мгновенный пересчёт px → rem ✓ Пакетная конвертация ✓ Настройка базового размера шрифта ✓ CSS-сниппет ✓ Справочная таблица

Что это такое

REM — это относительная единица измерения в CSS, которая зависит от размера шрифта корневого элемента (html). Если задать html { font-size: 16px }, то 1rem будет равен 16px. Конвертер PX в REM решает рутинную задачу: вместо того чтобы вручную делить пиксели на базовый размер (и ошибаться), вы просто вставляете значения и получаете готовый результат в долях rem. Это особенно полезно, когда дизайн-макет свёрстан в пикселях, а код нужно писать в адаптивных единицах.

Как пользоваться

Откройте страницу конвертера.
В поле «Размер шрифта (базовый)» укажите стандартное значение — обычно это 16px, но можно поставить любое (например, 14px или 10px) под ваш проект.
Введите значение в пикселях — одно или сразу несколько через запятую, пробел или перенос строки.
Нажмите кнопку конвертации — инструмент мгновенно покажет результат в rem.
Скопируйте готовые значения или воспользуйтесь кнопкой «Копировать» для всего списка.
Если нужно, посмотрите справочную таблицу — она пригодится для типовых размеров (например, 8, 12, 16, 24, 32 пикселя).

Кому и когда пригодится

Верстальщикам и frontend-разработчикам — при создании адаптивных макетов, где типографика и отступы должны масштабироваться относительно корневого шрифта.
Дизайнерам, которые пишут код — для быстрой проверки, как будут выглядеть размеры из Figma или Sketch в rem.
Командам, работающим с темами — если в проекте используется смена базового размера шрифта (например, для accessibility), конвертер поможет пересчитать все значения за секунды.
При рефакторинге CSS — когда нужно перевести устаревшие px в современные rem для лучшей масштабируемости.

Плюсы и ограничения

Плюсы:

Экономит время: пакетная конвертация заменяет десятки операций в калькуляторе.
Гибкая настройка базового размера — подходит для нестандартных проектов.
Понятный вывод: сразу видно и дробные значения (например, 1.5rem), и CSS-сниппет для вставки.
Не требует установки — работает в браузере на любой платформе.

Ограничения:

Не учитывает вложенные элементы: если у родителя задан свой font-size, реальный размер может отличаться от расчётного.
Не заменяет знание CSS — нужно понимать, когда использовать rem, а когда em или vw.
Для очень больших списков значений результат может быть громоздким — лучше конвертировать порциями.

Частые вопросы

Почему 1rem не всегда равен 16px?

Потому что rem зависит от font-size корневого элемента <html>. Если вы или пользователь изменили настройки браузера (например, увеличили шрифт для удобства чтения), то 1rem станет больше. Это фича, а не баг — именно так обеспечивается доступность.

Что делать, если в макете базовый шрифт не 16px?

Просто впишите своё значение в поле «базовый размер». Например, если у вас html { font-size: 62.5% } — это фактически 10px, и конвертер пересчитает всё правильно.

Можно ли перевести rem обратно в px этим же инструментом?

Да, логика та же: вы задаёте базовый размер и вводите значение в rem (например, 1.25). Инструмент покажет эквивалент в пикселях. По сути, это калькулятор rem, работающий в обе стороны.

Чем px to rem лучше, чем просто оставить пиксели?

Пиксели — абсолютная единица, они не масштабируются при изменении настроек шрифта пользователя. REM делает сайт гибче: типографика и отступы подстраиваются под предпочтения посетителя, что улучшает юзабилити и соответствует современным стандартам вёрстки.

Нужно ли конвертировать все размеры в rem?

Нет. Границы, тени и мелкие декоративные элементы можно оставить в px — они не должны масштабироваться. А вот шрифты, отступы, ширины блоков и высоты строк лучше переводить в rem, чтобы сохранить пропорции при зуме или смене базового шрифта.