Px в Rem

Быстрый локальный конвертер px в rem

Этот двусторонний конвертер px в rem позволяет легко переводить статические значения в пикселях в масштабируемые относительные единицы. Верстаете ли вы макет или обновляете старые стили, вы мгновенно получите нужные значения CSS.

Вычисления выполняются мгновенно прямо во время ввода. Инструмент работает локально в браузере, поэтому здесь нет долгих загрузок и сетевых задержек. Вы можете легко переводить пиксели в rem или, наоборот, конвертировать rem в px, не отрывая рук от клавиатуры.

Зачем переводить пиксели в rem?

Годами веб-разработчики использовали пиксели (px) для всего: от размеров шрифта до отступов. Однако пиксели — это абсолютные единицы. Если слабовидящий пользователь изменит настройки браузера, чтобы увеличить базовый размер текста (например, 24px вместо стандартных 16px), любой текст, жестко заданный в пикселях, проигнорирует эту настройку и останется мелким.

При использовании единиц rem (root em) ваш макет учитывает настройки пользователя. Если пользователь увеличит базовый размер шрифта, типографика и отступы, заданные в rem, увеличатся пропорционально. Это делает сайт гораздо более доступным и адаптивным. Использование калькулятора CSS rem избавляет от расчетов вручную, позволяя писать доступный код и при этом точно соблюдать размеры в пикселях из дизайн-макета.

Как работает CSS-калькулятор rem

Математика конвертации проста, но постоянные вычисления в уме замедляют работу. Формула перевода пикселей в rem:

Целевой размер в px ÷ Базовый размер шрифта = Значение в rem

По умолчанию почти все веб-браузеры используют базовый размер шрифта 16px. Если вы хотите, чтобы заголовок на стандартном экране был равен 32px, вы делите 32 на 16 и получаете 2rem.

Если вы работаете с существующим кодом и вам нужно понять, какой реальный размер будет у относительной единицы, используйте инструмент для перевода rem в px. Формула просто меняется на обратную:

Значение в rem × Базовый размер шрифта = Значение в px

Этот калькулятор работает в обоих направлениях одновременно. Просто введите число в любое поле, и второе обновится мгновенно. Он также округляет сложные десятичные дроби до четырех знаков, сохраняя ваш CSS чистым и читаемым без ущерба для точности.

Работа с нестандартным базовым размером шрифта

Хотя 16px является веб-стандартом, в некоторых проектах корневой размер шрифта изменяют. Очень популярный прием в старом коде — «трюк с 62.5%». Разработчики прописывали html { font-size: 62.5%; } в CSS. Поскольку 62.5% от стандартных 16px — это ровно 10px, базовый размер шрифта становится равным 10.

С базой 10 считать становится элементарно: 24px — это 2.4rem, 18px — 1.8rem и так далее. Если вы работаете над проектом, использующим этот метод или любой другой нестандартный корневой размер, просто измените значение в поле Базовый размер шрифта в калькуляторе. Инструмент принимает любую базу от 1 до 100, мгновенно пересчитывает текущие значения и обновляет всю таблицу.

Не только типографика: отступы и верстка

Хотя единицы rem чаще всего используют для font-size, они не менее важны и для верстки. Современные стандарты CSS рекомендуют применять относительные единицы в следующих случаях:

• Отступы (margin и padding): Пространство между элементами масштабируется вместе с текстом, предотвращая «слипание» верстки.
• Ширина и высота: Кнопки и поля ввода естественно увеличиваются пропорционально тексту внутри них.
• Медиазапросы: Установка брейкпоинтов в rem или em гарантирует, что верстка адаптируется под реальный размер текста, а не только под физическую ширину экрана.

При разработке сложных UI-компонентов этот инструмент можно использовать вместе с Генератором теней для создания полностью масштабируемых и доступных дизайн-систем. Когда таблица стилей будет готова, пропустите её через Минификатор CSS, чтобы уменьшить размер файла для продакшена.

Использование справочной таблицы

В стандартных дизайн-системах обычно используются одни и те же шкалы отступов и типографики. Под основным калькулятором находится справочная таблица часто используемых значений в пикселях (от 10px до 64px), автоматически переведенных в rem и em.

Таблица обновляется в реальном времени при изменении базового размера шрифта. Это отличная шпаргалка для стандартных шагов отступов (например, 16, 24, 32 и 48 пикселей), благодаря которой вам не придется вводить каждое значение в калькулятор вручную. Если вам нужно перевести другие физические величины, воспользуйтесь нашим универсальным Конвертером величин.