Что это такое
Проценты в CSS — удобный, но коварный инструмент: они всегда зависят от родительского элемента. REM, в свою очередь, привязаны к корневому размеру шрифта (html). Конвертер процентов в REM решает задачу перевода одной относительной единицы в другую без ручных подсчётов. Это калькулятор, который учитывает и базовый размер корня (обычно 16px), и размер шрифта родительского контейнера, чтобы выдать точное значение в rem для вашего CSS-кода.
Как пользоваться
- Откройте страницу инструмента и найдите поле «Проценты» (или «%»).
- Введите числовое значение процента, которое хотите перевести (например,
150). - Укажите root font-size — стандартно это
16px, но если вы меняли его в CSS, впишите своё значение. - Задайте parent font-size — размер шрифта родительского элемента, относительно которого считается процент. Если не знаете, оставьте значение по умолчанию.
- Нажмите кнопку «Конвертировать» (или «Рассчитать»).
- Скопируйте результат из поля вывода — вы получите готовое значение в rem (например,
1.5rem). - При необходимости воспользуйтесь встроенной таблицей соответствий для частых значений (100%, 50%, 200% и т.д.) и превью, чтобы визуально оценить размер.
Кому и когда пригодится
Инструмент полезен фронтенд-разработчикам и верстальщикам, которые работают с адаптивными макетами. Если вы переносите дизайн из Figma или Sketch, где размеры часто указаны в процентах, этот конвертер поможет быстро привести их к rem без ошибок в подсчётах. Также он пригодится при рефакторинге старого кода: замена процентных значений на rem делает масштабирование сайта предсказуемым. Инструмент будет полезен при создании fluid-типографики, когда размеры шрифтов и отступов должны плавно меняться в зависимости от ширины экрана. Наконец, это отличный помощник для обучения: наглядно видно, как процент соотносится с rem при разных настройках корневого размера.
Плюсы и ограничения
Плюсы:
- Мгновенный перевод процентов в rem без ручных вычислений.
- Учёт кастомного root font-size — результат точен для любого проекта.
- Возможность задать parent font-size для корректного расчёта вложенных элементов.
- Визуальное превью помогает оценить итоговый размер до применения в коде.
- Таблица соответствий ускоряет работу с типовыми значениями.
Ограничения:
- Результат зависит от правильности введённых данных — ошибка в parent font-size даст неверный rem.
- Инструмент не заменяет понимания CSS-модели: если родительский шрифт тоже задан в % или em, потребуется сначала вычислить его пиксельное значение.
- Не поддерживает сложные выражения (например,
calc(100% - 10px)), только чистые проценты.
Частые вопросы
Почему 100% не всегда равно 1rem?
Всё зависит от контекста. Если parent font-size равен 16px и root font-size тоже 16px, то 100% = 16px = 1rem. Но если родительский шрифт — 20px, то 100% будет 20px, что в rem составит 1.25rem. Конвертер учитывает обе переменные, чтобы избежать путаницы.
Какой root font-size использовать для расчёта?
По умолчанию браузеры используют 16px. Если вы не меняли html { font-size: ... }, смело оставляйте 16. В проектах с адаптивом часто задают 10px для удобства счёта — тогда укажите это значение в калькуляторе.
Чем rem лучше процентов в CSS?
REM не зависит от родителя и всегда привязан к корневому элементу. Это делает код предсказуемым: изменение font-size на html масштабирует всё равномерно, а процент может неожиданно «поехать» при изменении вложенности.
Можно ли конвертировать проценты для не шрифтовых свойств?
Да, но осторожно. Для свойств вроде width или padding процент считается от ширины родителя, а не от font-size. В таких случаях перевод в rem некорректен — инструмент заточен именно под font-size и связанные с ним свойства.
Что делать, если результат выглядит слишком дробным?
Это нормально для rem — например, 37.5% при root 16px и parent 16px даст 0.375rem. В CSS можно округлить до 0.38rem, но лучше оставить точное значение, чтобы избежать накопления погрешностей при вложенных расчётах.