🔄

Конвертер процентов в REM

Мгновенный перевод % в rem с учётом корневого шрифта

Проценты (%)

Результат (rem)

—

Корневой шрифт (root font-size)по умолчанию 16px

Родительский шрифт (parent font-size)

Укажите, если % задается относительно элемента с другим размером шрифта

Формула: REM = % ÷ 100

Таблица частых значений

%	PX	REM
50%	8px	0.5rem
62.5%	10px	0.625rem
75%	12px	0.75rem
87.5%	14px	0.875rem
100%	16px	1rem
112.5%	18px	1.125rem
125%	20px	1.25rem
150%	24px	1.5rem
175%	28px	1.75rem
200%	32px	2rem
250%	40px	2.5rem
300%	48px	3rem

Загрузка инструмента...

Конвертер процентов в REM онлайн — перевод % в rem для CSS

Онлайн-конвертер процентов в REM — профессиональный инструмент для веб-разработчиков и верстальщиков, который мгновенно переводит значение в процентах (%) в единицы измерения rem. Конвертация процентов в rem — одна из самых востребованных операций при создании адаптивных и отзывчивых веб-сайтов. Понимание соотношения между процентами и rem-единицами позволяет создавать гибкую, масштабируемую типографику и компоненты, которые корректно отображаются на всех устройствах и экранах.

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

Зачем конвертировать проценты в rem? Использование rem-единиц вместо процентов дает ряд преимуществ: предсказуемость размеров элементов (rem всегда привязан к корневому элементу, а не к цепочке вложенных родителей), простота расчета медиа-запросов, удобство масштабирования всего интерфейса изменением единственного значения font-size на корневом элементе. При этом проценты остаются незаменимыми для задания ширин блоков, отступов и других свойств, зависящих от контейнера. Понимание того, как переводить процентные значения в rem и обратно, — ключевой навык для фронтенд-разработчика.

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

Инструмент для перевода % в rem будет полезен фронтенд-разработчикам и верстальщикам при создании адаптивных макетов, дизайнерам интерфейсов, настраивающим типографику в Figma или Sketch, студентам и начинающим разработчикам, изучающим CSS-единицы, владельцам сайтов, которые самостоятельно вносят правки в стили, а также всем, кому нужно быстро перевести процентное значение шрифта в rem для CSS-кода.

Стандартная формула конвертации: rem = (% 100) parent_font_size root_font_size . При одинаковых значениях корневого и родительского шрифта (по умолчанию 16px) формула упрощается до rem = % 100 . Например, 150% при стандартном размере шрифта равно 1,5 rem, что соответствует 24 пикселям. Если корневой шрифт задан как 10px (популярный прием "62.5% trick"), то расчет изменится: 150% при parent=16px и root=10px даст 2,4 rem.

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

Для быстрой справки приводим соотношение наиболее распространенных процентных значений: 50% = 0,5rem (8px), 62,5% = 0,625rem (10px), 75% = 0,75rem (12px), 87,5% = 0,875rem (14px), 100% = 1rem (16px), 112,5% = 1,125rem (18px), 125% = 1,25rem (20px), 150% = 1,5rem (24px), 200% = 2rem (32px). Эти соотношения справедливы при стандартных настройках браузера (html font-size = 16px) и равенстве корневого и родительского размеров шрифта.

Мгновенная конвертация процентов в rem с автоматическим пересчетом при каждом изменении
Настраиваемый корневой размер шрифта (root font-size) — для нестандартных проектов
Расширенный режим с указанием родительского размера шрифта (parent font-size)
Промежуточный результат в пикселях (px) для наглядности
Визуальный превью размера текста в реальном времени
Таблица популярных процентных значений с результатами в rem и px
Быстрое копирование результата одним кликом по полю или кнопке
Полная клиентская обработка без отправки данных на сервер

🔧

Адаптация legacy-проекта

Фронтендер Максим переводил старый проект с процентных размеров шрифтов на rem для лучшей предсказуемости.

Определил базу: html font-size = 16px (100%)

Конвертировал заголовок: 200% → 2rem (32px)

Конвертировал мелкий текст: 87.5% → 0.875rem (14px)

Конвертировал контейнер: width: 80% — оставил в %, т.к. это относительно родителя, а не шрифта

✅

Все шрифтовые размеры переведены в rem, а ширины оставлены в % — каждая единица используется по назначению

🧠

Факты о % и rem в CSS

💎

В CSS % для font-size — относительно родителя: 150% от 16px = 24px. rem — всегда относительно html: 1.5rem = 24px при базе 16px.

🔍

Проценты и rem ведут себя идентично для font-size, если нет вложенности. Разница проявляется при вложенных элементах.

📊

Трюк «62.5%»: html { font-size: 62.5% } делает 1rem = 10px, упрощая пересчёт: 1.6rem = 16px, 2.4rem = 24px.

🌟

CSS-функция calc() позволяет смешивать единицы: width: calc(100% - 2rem) — мощный инструмент для адаптивности.

⚡

В email-вёрстке rem не поддерживается — приходится использовать px и %. Email-клиенты отстают от браузеров на 10+ лет.

🧠

Container queries (CSS, 2023) позволяют использовать единицы cqw/cqh — проценты от контейнера, а не от viewport.

⚠️

Не все проценты одинаковы

В CSS % означает разное для разных свойств: font-size — от родительского шрифта, width — от ширины родителя, margin — от ширины родителя. rem всегда от html — это предсказуемее.

Как перевести проценты в rem — пошаговая инструкция

Введите значение в процентах

Укажите в поле ввода процентное значение, которое хотите конвертировать в rem. Поддерживаются целые и дробные числа (например, 62,5 или 150). Результат пересчитывается автоматически при каждом изменении.

Настройте корневой размер шрифта (при необходимости)

По умолчанию корневой шрифт установлен в 16px (стандарт браузеров). Если в вашем проекте используется другое значение html font-size — измените его с помощью ползунка или введя число вручную. Для расширенных случаев включите режим с настройкой родительского шрифта.

Скопируйте результат в rem

Результат отображается мгновенно в поле справа. Нажмите на поле результата или кнопку копирования, чтобы скопировать значение в rem. Также доступно промежуточное значение в пикселях и визуальный превью размера текста для проверки.

Примеры конвертации процентов в rem

🎨 Адаптивная типографика

Дизайнер задал размер заголовка 150% от базового шрифта. Вводим 150 в конвертер и получаем 1,5rem. В CSS пишем font-size: 1.5rem вместо font-size: 150%. Теперь размер заголовка привязан к корневому элементу, а не к каскаду родителей, что упрощает поддержку и предотвращает нежелательное накопление процентных размеров.

⚙️ Миграция на rem при рефакторинге CSS

В устаревшем проекте все размеры шрифтов заданы в процентах. При переходе на rem-единицы конвертер позволяет быстро пересчитать каждое значение. Например, body {font-size: 87.5%} (14px) заменяется на font-size: 0.875rem, h1 {font-size: 200%} (32px) — на font-size: 2rem. Это ускоряет рефакторинг и минимизирует ошибки.

📐 Трюк 62.5% и расчет rem

Популярный прием: задать html {font-size: 62.5%} (10px) для удобного пересчета rem в голове. В этом случае устанавливаем корневой шрифт в 10px в конвертере. Тогда, например, 160% от стандартного родителя (16px) даст 25,6px = 2,56rem. Конвертер автоматически учтет нестандартный корневой размер.

📱 Масштабирование для accessibility

Пользователь увеличил шрифт в настройках браузера до 20px. Элемент со значением 125% родительского шрифта при стандартном каскаде имеет разный результат в rem в зависимости от корня. Конвертер позволяет проверить, как изменится значение в rem при разных базовых размерах, обеспечивая доступность и корректное масштабирование интерфейса.

Частые вопросы о конвертации процентов в rem

Что такое единица rem в CSS и чем она отличается от процентов?

Rem (root em) — относительная единица измерения в CSS, которая всегда вычисляется относительно размера шрифта корневого элемента <html>. По умолчанию это 16px. Проценты же вычисляются относительно родительского элемента, что может приводить к непредсказуемому накоплению размеров при глубокой вложенности. Например, если родитель имеет font-size: 120%, а вложенный элемент — тоже 120%, итоговый размер текста будет 144% от корня (1,2 1,2). При использовании rem такой проблемы нет — 1,2rem всегда равен 19,2px при корне 16px.

Как перевести проценты в rem — формула конвертации?

Формула перевода: rem = (процент 100) размер_родительского_шрифта размер_корневого_шрифта. Если родительский и корневой шрифт совпадают (стандартная ситуация), формула упрощается до rem = процент 100. Так, 100% = 1rem, 150% = 1,5rem, 75% = 0,75rem. Конвертер автоматически выполнит расчет с учетом заданных параметров.

Зачем конвертировать проценты в rem — какие преимущества?

Rem-единицы обеспечивают предсказуемость: размер элемента всегда привязан к корню, а не к цепочке родителей. Это упрощает поддержку кода, предотвращает каскадное накопление размеров, облегчает глобальное масштабирование интерфейса и улучшает доступность (accessibility) — пользовательские настройки размера шрифта корректно применяются ко всем rem-элементам. Перевод процентов в rem особенно полезен при рефакторинге устаревших проектов.

Что такое корневой размер шрифта и как его узнать?

Корневой размер шрифта (root font-size) — это значение свойства font-size у элемента <html>. По умолчанию во всех современных браузерах он составляет 16px. Узнать текущее значение можно в DevTools браузера: откройте инструменты разработчика (F12), выберите элемент <html> и посмотрите computed font-size. Также проверьте CSS-файлы проекта на наличие html {font-size: ...} — часто встречаются значения 62.5% (10px), 100% (16px) или фиксированные пиксели.

Когда нужно указывать родительский размер шрифта?

Родительский размер шрифта важен, если процентное значение задано относительно элемента, чей font-size отличается от корневого. Например, если у контейнера font-size: 20px, а внутри него элемент имеет font-size: 80%, то реальный размер составит 16px. Чтобы корректно перевести эти 80% в rem, нужно указать родительский шрифт 20px. В расширенных настройках конвертера есть поле для задания parent font-size.

Поддерживается ли rem во всех браузерах?

Да, единица rem имеет превосходную поддержку во всех современных браузерах: Chrome, Firefox, Safari, Edge, Opera, а также мобильных браузерах iOS Safari и Chrome for Android. Поддержка появилась начиная с IE9+. На сегодняшний день более 98% пользователей интернета используют браузеры с полной поддержкой rem. Вы можете безопасно использовать rem-единицы в любом современном веб-проекте.

Безопасно ли использовать конвертер? Мои данные сохраняются?

Абсолютно безопасно. Все вычисления конвертера процентов в rem выполняются локально в вашем браузере с помощью JavaScript. Никакие данные не отправляются на сервер и не сохраняются. При закрытии страницы все введенные значения сбрасываются. Это обеспечивает полную конфиденциальность и мгновенную скорость работы.

Полезная информация

Задавайте html {font-size: 100%} вместо фиксированных пикселей, чтобы сохранить пользовательские настройки браузера

Используйте rem для font-size, margin, padding — всего, что должно масштабироваться единообразно

Оставляйте проценты для width, max-width и flex-basis — они должны зависеть от контейнера

Прием "62.5% trick" (html font-size: 62.5%) делает 1rem = 10px, упрощая устный пересчет

В медиа-запросах rem корректнее px, так как учитывает увеличенный шрифт пользователя

При отладке используйте DevTools Computed tab для проверки реальных размеров в пикселях

В CSS Custom Properties удобно задать --base-font: 1rem и строить шкалу размеров от этой переменной

Конвертер процентов в rem постоянно обновляется для максимальной точности и удобства.

Все расчеты выполняются полностью в вашем браузере. Результаты конвертации точны до четырех знаков после запятой, что достаточно для любых задач верстки. Если у вас есть предложения по улучшению инструмента или вопросы по использованию единиц CSS — обращайтесь через форму обратной связи.

Комментарии (1)

Был ли полезен этот инструмент?

Руслан Авдеев (автор проекта)• 1 янв. 2024 г., 00:00

🎉 Спасибо, что используете наши инструменты! Все инструменты на ToolFox полностью бесплатны и постоянно улучшаются. 📝 Пожалуйста, оставляйте комментарии: - Если инструмент работает некорректно - Если есть идеи по улучшению - Поделитесь своим опытом использования 👍 Ставьте лайки/дизлайки - это помогает мне понять, какие инструменты нуждаются в доработке. Я обновляю сайт каждую неделю на основе вашей обратной связи. ⭐ Если вам нравится ToolFox — буду благодарен за отзыв о сайте в Яндекс.Браузере (нажмите на ⋮ → «Оценить сайт» в панели браузера). Это помогает другим людям находить наши инструменты! 😊 Также вы можете написать мне напрямую в Telegram: @avdeevrus Все доработки и улучшения по вашим пожеланиям делаю бесплатно! Благодарю за доверие и использование ToolFox! 🚀