Конвертер PX в REM
НовоеПереводите между px, rem, em и pt относительно корневого размера шрифта.
Browsers default to a 16px root. The 10px preset is the popular 62.5% trick, where 1rem maps to 10px.
| px | rem | copy |
|---|
Runs entirely in your browser. Nothing is uploaded.
Конвертация px в rem и обратно — мгновенно
Этот конвертер px в rem синхронизирует px, rem, em и pt относительно выбранного базового размера шрифта. Достаточно ввести значение в любое поле — остальные обновятся автоматически. Перевод из пиксельного макета в масштабируемые единицы CSS rem — или обратно из rem в px — не требует никаких вычислений. Это быстрый бесплатный конвертер единиц CSS, который работает полностью в вашем браузере без отправки каких-либо данных.
Таблица под конвертером содержит все распространённые значения px на каждый день — скопируйте любое значение одним кликом. Измените базовый размер шрифта, и вся таблица пересчитается мгновенно. Это удобно при переключении между проектом с корнем 16px и проектом с корнем 10px (трюк 62.5%).
Формула перевода px в rem
Конвертация проста: rem = px ÷ базовый размер шрифта. По умолчанию браузеры используют корень 16px, поэтому 16px = 1rem, 24px = 1.5rem, 40px = 2.5rem. Обратная операция: px = rem × корень, то есть 0.875rem × 16 = 14px. Поскольку конвертер двунаправленный, не нужно держать в голове, в какую сторону вы работаете — просто введите известное значение, и остальные обновятся.
Трюк 62.5% упрощает вычисления: задайте html { font-size: 62.5%; }, чтобы корень стал 10px, тогда значения rem кратно соответствуют десяткам. 1.6rem = 16px, 2.4rem = 24px, 3.2rem = 32px. Переключитесь на пресет 10px здесь, чтобы увидеть чистое соответствие для всех распространённых значений.
px, rem и em — в чём разница?
px — абсолютная единица: 16px всегда остаётся 16px. rem относится к размеру шрифта корневого элемента (html), что задаёт единый ориентир для всей страницы. em зависит от размера шрифта родительского элемента и накапливается при вложенности: абзац внутри секции 1.2em внутри статьи 1.2em даёт 1.2 × 1.2 = 1.44em, тогда как 1.44rem всегда равно 1.44× корня вне зависимости от глубины вложенности.
Инструмент также отображает pt (1px = 0.75pt) для значений в стиле печати. При корне 16px и отсутствии вложенности 16px, 1rem и 1em равны — разница проявляется лишь при изменении размеров шрифта родителей или когда пользователь меняет базовый размер текста в браузере.
Зачем использовать rem для размеров шрифтов — доступность важна
Задание размеров в rem вместо px — это реальное улучшение доступности. Когда пользователь увеличивает базовый размер текста в браузере (распространённая потребность людей с нарушениями зрения или читающих на экранах с высокой плотностью пикселей), все rem-размеры шрифтов и отступы масштабируются пропорционально. Значения в px остаются фиксированными, и текст может стать слишком мелким относительно контейнера.
Рекомендация WCAG 2.1 1.4.4 требует, чтобы текст можно было увеличить до 200% без потери контента или функциональности. Использование rem по умолчанию значительно упрощает выполнение этого требования: вся типографская шкала и большая часть отступов меняется вместе с корнем, сохраняя пропорции. Именно поэтому такие инструменты, как Tailwind CSS, по умолчанию используют rem.
Распространённые значения px и rem — быстрая справка
При стандартном корне 16px: 8px = 0.5rem, 10px = 0.625rem, 12px = 0.75rem, 13px = 0.8125rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 28px = 1.75rem, 32px = 2rem, 36px = 2.25rem, 40px = 2.5rem, 48px = 3rem, 64px = 4rem.
Это значения, которые чаще всего встречаются в CSS-коде. Справочная таблица в инструменте содержит все эти значения и позволяет скопировать любое из них одним кликом — быстрее ручных вычислений и надёжнее, чем держать таблицу в голове. Добавьте в закладки этот калькулятор rem и открывайте его каждый раз, когда нужно перевести пиксели из макета дизайна в rem для CSS.
Приватно, мгновенно и бесплатно — без регистрации
Ничего не нужно устанавливать и регистрироваться. Каждая конвертация — px в rem, rem в px, px в em, em в px — выполняется локально в вашем браузере с помощью JavaScript. Вводимые значения никуда не отправляются и не сохраняются ни на каком сервере. В отличие от ряда онлайн-конвертеров, требующих создания аккаунта или просмотра рекламы, здесь всё доступно сразу и без ограничений.
Инструмент работает офлайн после загрузки страницы, не имеет лимитов использования и работает на любом устройстве — компьютере, планшете, iPhone или Android. Добавьте этот конвертер px в rem в закладки как ежедневный CSS-инструмент и избавьтесь от ручных вычислений при каждом переводе спецификации Figma в масштабируемый CSS.
Frequently asked questions
Как перевести px в rem?
Разделите значение в пикселях на базовый размер шрифта: rem = px ÷ корень. При стандартном корне браузера 16px: 16px ÷ 16 = 1rem, 24px ÷ 16 = 1.5rem, 40px ÷ 16 = 2.5rem. Введите любое значение px в конвертер выше — поле rem обновится мгновенно, никаких вычислений в уме. При трюке 62.5% (корень 10px) просто делите на 10: 24px = 2.4rem.
Как перевести rem в px?
Умножьте значение rem на базовый размер шрифта: px = rem × корень. При стандартном корне 16px: 1rem × 16 = 16px, 1.5rem × 16 = 24px, 0.875rem × 16 = 14px. Отредактируйте поле rem в конвертере — поле px обновится немедленно. Конвертер полностью двунаправленный: введите известное значение, и остальные обновятся автоматически.
Чему равен 1 rem в пикселях?
1rem равен размеру шрифта корневого элемента (html). Во всех основных браузерах — Chrome, Safari, Firefox, Edge — по умолчанию это 16px, то есть 1rem = 16px, если корень не изменён. Если задать корень 10px (трюк 62.5%), 1rem станет равен 10px. Пользователи также могут изменить базовый размер текста в настройках браузера, что изменит, чему равен 1rem для них — именно поэтому rem предпочтительнее px для доступных размеров шрифтов.
Чему равно 0.875rem в пикселях?
0.875rem равно 14px при стандартном корне 16px (0.875 × 16 = 14). Это одно из наиболее часто используемых значений rem в CSS-фреймворках — класс text-sm в Tailwind CSS равен 0.875rem (14px). При корне 10px (трюк 62.5%) 0.875rem составит 8.75px.
В чём разница между rem и px?
px — абсолютная, фиксированная единица: 16px всегда остаётся 16 пикселями вне зависимости от настроек пользователя или размера экрана. rem — относительная единица: это кратное размера шрифта корневого элемента (html), поэтому 1rem = 16px по умолчанию, но увеличивается, если пользователь увеличивает базовый размер текста в настройках браузера. Это делает rem-вёрстку более доступной: текст масштабируется пропорционально при запросе более крупного шрифта, тогда как px-текст остаётся фиксированным и может стать слишком мелким.
В чём разница между px, rem и em?
px — фиксированная единица. rem — относительная к корневому (html) размеру шрифта, единый ориентир для всей страницы. em — относительная к размеру шрифта собственного родительского элемента, поэтому при вложенности накапливается: родитель 20px с дочерним элементом 1.5em даёт 30px. Задайте тому же дочернему элементу 1.5rem — получите 24px (1.5 × корень 16px), вне зависимости от родителя. При корне 16px и отсутствии вложенности 16px, 1rem и 1em равны — разница проявляется только при изменении размеров шрифтов родителей.
Что лучше для размеров шрифтов — rem или px?
С точки зрения доступности rem предпочтительнее для размеров шрифтов. Когда пользователь увеличивает базовый размер текста в браузере (распространённая потребность людей с нарушениями зрения), все rem-шрифты масштабируются вместе с ним, тогда как значения в px остаются неизменными. Требование WCAG 2.1 1.4.4 (Масштабирование текста) предписывает, чтобы текст увеличивался до 200% без потери функциональности — rem делает выполнение этого требования простым. Используйте px только для элементов, которые не должны масштабироваться: например, рамки 1px или иконки фиксированного размера.
Что такое трюк 62.5% в CSS?
Трюк 62.5% устанавливает размер шрифта корневого элемента (html) равным 62.5% — что при стандартном значении браузера 16px составляет 10px. Это делает арифметику rem тривиально простой: 1.6rem = 16px, 2.4rem = 24px, 3.2rem = 32px. Каждое значение rem кратно 10. Переключитесь на пресет 10px здесь, и конвертер со справочной таблицей пересчитается мгновенно. Обратная сторона: корень переопределяет браузерный размер по умолчанию, что незначительно снижает доступность.
Какие распространённые размеры шрифтов в rem при корне 16px?
При стандартном корне 16px: 10px = 0.625rem, 12px = 0.75rem, 13px = 0.8125rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 28px = 1.75rem, 32px = 2rem, 40px = 2.5rem, 48px = 3rem. Справочная таблица в инструменте содержит все распространённые значения и позволяет скопировать каждое из них одним кликом — быстрее, чем считать вручную каждый раз.
Как применяется перевод px в rem в Tailwind CSS?
Tailwind CSS по умолчанию использует rem для большинства размеров при корне 16px. Шкала отступов Tailwind: 1 единица = 0.25rem = 4px. Так, space-4 = 1rem = 16px, space-6 = 1.5rem = 24px, space-8 = 2rem = 32px. Для типографики: text-sm = 0.875rem (14px), text-base = 1rem (16px), text-lg = 1.125rem (18px), text-xl = 1.25rem (20px), text-2xl = 1.5rem (24px). Этот конвертер позволяет быстро сопоставить любое значение px с rem-системой Tailwind.
Работает ли этот конвертер px в rem офлайн?
Да, полностью. Конвертер работает целиком на JavaScript в вашем браузере — без обращений к серверу, без API-запросов и без отправки данных. После загрузки страницы он работает офлайн. Введённые значения никогда не покидают ваше устройство. Добавьте его в закладки и пользуйтесь в самолёте, в метро или в любом месте без интернета. Ничего не хранится ни на каком сервере.
Как изменить базовый размер шрифта в конвертере?
Введите любое значение в поле «Базовый размер шрифта» — или используйте кнопки пресетов: 16px (стандарт браузера) или 10px (трюк 62.5%). Все значения rem, em и pt в таблице и активных полях пересчитаются мгновенно. Если в вашем CSS задано html { font-size: 18px; }, введите 18 в качестве корня — и все конвертации будут точны для вашего проекта.
Related tools
Все инструменты
Новое Кодирование / декодирование HTML-сущностей
Экранируйте и разэкранируйте HTML-сущности, с опциональным числовым кодированием.
Новое Конструктор Cron-выражений
Объясните расписание Cron простыми словами и посмотрите ближайшие запуски.
Новое Минификатор HTML
Сжимайте HTML, удаляя комментарии и схлопывая пробелы.
Новое Минификатор CSS
Уменьшайте размер CSS, убирая комментарии и лишние пробелы.
Новое Экранирование / разэкранирование JSON
Экранируйте сырой текст в безопасную строку JSON и разэкранируйте обратно.
Новое Коды состояния HTTP
Удобный справочник кодов состояния HTTP с понятными объяснениями.