Как пользоваться
- Введите размер в поле Значение и выберите направление в поле Перевести, например из px в rem.
- Проверьте поле Базовый размер шрифта (px). Укажите размер, который сайт задаёт для корневого элемента; 16 px — значение браузера по умолчанию.
- Вставьте CSS в поле CSS для пересчёта и выберите Перевести px в CSS в: rem или em.
- Скопируйте CSS с пересчитанными длинами или проверьте размер в Таблице пересчёта.
Как связаны px, rem и em
px — это абсолютная длина на экране. rem — кратное размера шрифта корневого элемента (html), а em — кратное размера шрифта того элемента, где он используется. Обе единицы зависят от базового размера шрифта: если база 16 px, то 1 rem равен 16 px.
Чтобы перевести px в rem, разделите на базу. Чтобы перевести rem или em обратно в px, умножьте на базу. При одинаковом базовом размере rem и em дают одно и то же число; они различаются, только когда размер шрифта родителя не равен базе.
rem = px / базовый размер шрифта; px = rem × базовый размер шрифтаЧто меняет конвертер CSS и чего он не делает
Каждое число, за которым стоит px, пересчитывается, включая отрицательные значения и десятичные дроби вроде .5px. Числа в CSS пишутся с точкой, как того требует CSS: не больше четырёх знаков после точки и без лишних нулей. Нулевая длина становится 0 без единицы, что CSS допускает.
Конвертер не разбирает смысл CSS. Значение в px внутри комментария или строки, например content с текстом 10px, тоже пересчитывается. Содержимое url() не трогается, поэтому имя файла, оканчивающееся на px, не меняется. Проверьте результат, прежде чем его использовать.
- Используйте rem для размеров шрифта, отступов и ширины, которые должны расти, когда посетитель меняет размер текста.
- Оставляйте 1 px для тонких границ: значение в rem на некоторых экранах дало бы размытую линию.
Пример: основной текст 18 px при базе 16 px
18 делить на 16 равно 1,125, поэтому font-size: 18px становится font-size: 1.125rem. Отступ 40 px становится 2.5rem, потому что 40 делить на 16 равно 2,5.
Тот же размер 24 px при базе 10 px даёт 2,4 rem, а таблица показывает 24 px как 1,5 rem при базе 16 px. Во фрагменте CSS по умолчанию шесть длин в px; все шесть пересчитываются, и счётчик показывает 6.
Частые вопросы
Почему базовый размер шрифта 16 px?
Большинство браузеров использует 16 px как размер шрифта корневого элемента по умолчанию, поэтому 1 rem равен 16 px, пока сайт не задаёт другой размер. Введите значение, которое ваш сайт задаёт для элемента html.
В чём разница между rem и em?
rem зависит от размера шрифта корневого элемента, поэтому он одинаков по всей странице. em зависит от размера шрифта элемента, где используется, поэтому во вложенных элементах размер меняется. При одинаковой базе числа совпадают.
Нужно ли переводить в rem каждое значение в px?
Не всегда. Граница в 1 px на многих экранах выглядит чётче в px, а некоторые мелкие детали лучше оставить фиксированными. Используйте rem для размеров текста, отступов и ширины макета, которые должны масштабироваться вместе с настройками посетителя.
Почему некоторые значения в px в моём CSS не пересчитаны?
Значение в px пересчитывается, только если оно стоит отдельной длиной. Значения внутри url() и записи вроде 10pxx или 10px-2, которые не являются простой длиной, остаются как есть. Проверьте необычные значения вручную.
Почему таблица заканчивается на 64 px?
В ней перечислены размеры, которые дизайнеры используют чаще всего. Для любого другого размера введите его в поле «Значение» и выберите направление.
Источники
Цифры и текст в последний раз проверены вторник, 10 ноября 2026 г..