Как пользоваться
- Укажите «Базовый размер шрифта» в пикселях: используйте размер шрифта элемента html.
- Для расчёта em задайте «Размер шрифта родителя для em».
- Выберите «Точность»: от 0 до 6 знаков после запятой.
- Введите число с единицей px, rem или em в одно из полей: остальные два заполнятся автоматически.
Примеры
Размер шрифта при базе 10px
14px
1.4rem (14px ÷ 10px)
Отступы карточки с тонкой рамкой
.card {
padding: 16px 24px;
gap: 8px;
border: 1px solid #ddd;
}.card {
padding: 1rem 1.5rem;
gap: 0.5rem;
border: 1px solid #ddd;
}Вернуть размеры из rem в пиксели
.catalog {
gap: 0.75rem 2rem;
font-size: 1.125rem;
}.catalog {
gap: 12px 32px;
font-size: 18px;
}Советы
- Приведите сконвертированный файл в порядок с помощью Форматирования CSS.
- Уменьшите размер файла с помощью Минификации CSS.
Частые вопросы
Чем rem отличается от em?
Для rem конвертер делит значение в пикселях на размер шрифта элемента html, а для em — на размер шрифта родителя. При обратном переводе значение умножается на соответствующий размер шрифта.
Можно ли перевести в rem только размеры шрифта в CSS?
В списке «Свойства» выберите «Только свойства шрифта». Конвертер обработает font, font-size, line-height и letter-spacing, оставив остальные свойства без изменений.
Нужно ли переводить px в rem в медиазапросах?
По умолчанию конвертер их не меняет. Если включить «Конвертировать медиазапросы», будут обработаны параметры @media и @container; учитывайте, что rem в медиазапросах зависит от стандартного размера шрифта браузера, а не от заданного вами размера html.
Что проверить после конвертации CSS?
Проверьте выражения calc(): конвертер заменяет 0px на 0 даже внутри них, а сложение такого нуля с длиной может сделать выражение недопустимым. Значения em в CSS не конвертируются.
Отправляется ли CSS на сервер?
Расчёты выполняются в браузере; код инструмента не отправляет введённые значения или CSS на сервер и не сохраняет их. В localStorage сохраняются только настройки, последняя вкладка и связь размера шрифта родителя с базовым размером.