Как пользоваться: PX в REM конвертер
- Задайте корневой размер шрифта (оставьте 16, если на вашем сайте не меняется размер шрифта
html). - Введите значение в поле Пиксели, REM или EM, остальные поля обновятся сразу.
- Используйте таблицу частых размеров, чтобы скопировать часто применяемые значения rem одним кликом.
- Чтобы преобразовать целую таблицу стилей, вставьте её в поле Ваш CSS, выберите параметры и скопируйте результат.
Что такое rem?
rem расшифровывается как «root em»: 1rem равен размеру шрифта корневого элемента <html>. По умолчанию браузеры задают его 16px, поэтому 1.5rem = 24px. Главное отличие от пикселей в том, что rem учитывает настройку размера шрифта в браузере пользователя: если человек задал базовый шрифт 20px, текст и отступы станут пропорционально больше, а фиксированное значение px этого не сделает.
Формула перевода
rem = px ÷ корневой размер шрифта и px = rem × корневой размер шрифта. При стандартном корне 16px: 12px = 0.75rem, 14px = 0.875rem, 18px = 1.125rem, 32px = 2rem. em считается так же, но делится на размер шрифта самого элемента (для font-size — на размер шрифта родителя), поэтому при вложенности em перемножаются.
| Единица | Относительно | Лучше всего для |
|---|---|---|
px | Ничего, фиксированная | Тонкие границы, тени, мелкие детали |
rem | Размер шрифта корня (html) | Размеры шрифта, отступы, ширина блоков |
em | Размер шрифта текущего элемента | Отступы, которые масштабируются вместе с текстом кнопки, размеры иконок, медиазапросы |
Перевод всего CSS-файла
Конвертер фрагментов находит каждое число с единицей px и делит его на базовое значение, пропуская комментарии, строки в кавычках и пути url(…) (поэтому bg-16px.png не пострадает). Значения 1px по умолчанию сохраняются, потому что границы должны оставаться чёткими. Внутри медиазапросов rem и em всегда считаются от стандартного размера шрифта браузера (обычно 16px), а не от правила для html. Если ваша база отличается, включите опцию Не менять @media-запросы.
Трюк с 62.5% и почему его лучше не использовать
Правило html { font-size: 62.5%; } делает 1rem = 10px, что удобно для расчётов, но тогда каждому компоненту нужны явные размеры шрифта, а сторонние виджеты начинают отображаться мелко. Оставить стандартные 16px и пользоваться таким конвертером проще и надёжнее.
rem в Webflow
В выпадающих списках единиц Webflow есть rem и em, а значение 1.5rem можно ввести прямо в поле. Учтите, что размер шрифта, заданный для тега Body (All Pages) в Webflow, влияет на унаследованный текст и em, но не на rem: rem всегда ссылается на элемент html. Для значений, которые меняются вместе с экраном, создайте их в калькуляторе clamp().
Также ищут как: rem в px, px в em, калькулятор rem, размер шрифта rem, единицы css.
Инструменты, которые хорошо сочетаются с PX в REM конвертер
- Конвертер единиц — Переводите метрические, имперские и технические единицы в десяти категориях.
- CSS Форматер — Превратите минифицированную таблицу стилей в читаемый CSS: одно свойство на строке и правильно вложенные блоки @media.
- Минификатор CSS — Вставьте таблицу стилей, чтобы мгновенно уменьшить её размер.
- Генератор box-shadow — Добавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке, затем скопируйте CSS для box-shadow или text-shadow.
Часто задаваемые вопросы
Сколько пикселей в 1rem?
html { font-size: 62.5% }, то 1rem станет 10px; если пользователь увеличит размер шрифта в браузере, 1rem вырастет соответственно.В чём разница между rem и em?
html, поэтому он предсказуем везде. em считается от размера шрифта текущего элемента, поэтому вложенные em перемножаются: 1.2em внутри 1.2em даёт 1.44 от внешнего размера.Что использовать для размеров шрифта: rem или px?
Что использовать в медиазапросах: px, em или rem?
html font-size на вашем сайте.Может ли конвертер фрагментов сломать мой CSS?
px, и пропускает комментарии, строки и значения url(). Всё же просмотрите результат, особенно значения вроде границ 1px, которые по умолчанию сохраняются.