Что это такое
EM и REM — это относительные единицы измерения в CSS, которые зависят от размера шрифта. Разница в том, что EM вычисляется от font-size родительского элемента, а REM — от размера шрифта корневого элемента <html>. Конвертер EM в REM помогает быстро пересчитать значения из одной системы в другую, не высчитывая вручную все вложенности.
Как пользоваться
- Выберите направление перевода — из EM в REM или наоборот. Обычно это переключатель в верхней части инструмента.
- Укажите root font-size — базовый размер шрифта для REM (по умолчанию 16px, но можно задать любой).
- Задайте parent font-size — размер шрифта родительского элемента, от которого считаются EM.
- Введите значение — число в EM или REM, которое нужно сконвертировать. Можно указать несколько значений через запятую для пакетной обработки.
- Проверьте таблицу соответствий — инструмент покажет перевод для всех популярных значений (0.5, 1, 1.5, 2 и т.д.).
- Скопируйте результат — кнопка копирования добавляет готовое CSS-правило в буфер обмена одним кликом.
Кому и когда пригодится
- Верстальщикам при адаптации старых проектов с EM на REM — это частая задача при рефакторинге кода.
- Frontend-разработчикам, которые работают с гибридной системой, где часть размеров задана в EM, а часть в REM.
- Дизайнерам-верстальщикам, создающим масштабируемые компоненты: кнопки, карточки, модальные окна.
- Командам, переходящим на атомарный дизайн — когда нужно быстро пересчитать типографику под новую систему.
- На этапе отладки, когда сайт «плывет» из-за неправильного сочетания относительных единиц.
Плюсы и ограничения
Плюсы:
- Экономит время — не нужно лезть в DevTools и высчитывать значения вручную
- Работает с дробными значениями — точность до сотых
- Пакетный режим позволяет обработать сразу несколько чисел
- Визуальное превью помогает понять, как размер будет выглядеть на экране
- Таблица соответствий пригодится для быстрой сверки
Ограничения:
- Не заменяет понимания каскадности CSS — конвертер просто пересчитывает числа
- Результат зависит от правильно указанных root и parent font-size
- Если в проекте динамически меняются размеры шрифтов, статичный перевод может быть неточным
Частые вопросы
Чем EM отличается от REM на практике?
EM всегда считается от ближайшего родителя с заданным font-size. Если вложенность большая, значение может неожиданно «раздуться». REM игнорирует всех родителей и всегда опирается на корневой элемент <html>. Поэтому REM проще предсказать, а EM удобен для компонентов, которые должны масштабироваться от контекста.
Какой базовый размер шрифта ставить в конвертере?
Стандарт браузера — 16px. Если ваш проект использует другую базу (например, 10px для удобного пересчета), укажите её. Инструмент позволяет задать любое значение — главное, чтобы оно совпадало с реальным font-size на странице.
Можно ли перевести EM в REM, если не знаю размер родителя?
Нет, без parent font-size перевод будет некорректным. Если родительский размер не задан явно, он наследуется от <html>, и тогда EM совпадает с REM. В этом случае просто поставьте одинаковые значения для root и parent.
Зачем вообще использовать REM, если есть EM?
REM удобен для глобальных отступов, типографики и общих размеров — они не зависят от вложенности. EM лучше для изолированных компонентов, которые должны масштабироваться пропорционально своему контейнеру. Многие проекты используют гибридный подход.
Что делать, если нужно перевести значения с дробной частью?
Просто введите дробное число — конвертер обработает его с точностью до сотых. Например, 1.25em или 0.875rem переведутся корректно. Для пакетной конвертации перечислите значения через запятую или пробел.