Как пользоваться
- Укажите размер корневого шрифта, если сайт его изменяет (например, html { font-size: 62.5% } задаёт размер 10px).
- Введите значение в любое поле, чтобы преобразовать px в rem или rem в px. Переключитесь на em, если размер рассчитывается относительно родительского элемента.
- Используйте таблицу для быстрого поиска значений или вставьте фрагмент CSS, чтобы сразу преобразовать все длины в px и скопировать результат.
Как это работает
rem = px ÷ размер шрифта корневого элемента. При стандартном размере корневого шрифта 16px значение 24px равно 1.5rem, а 14px — 0.875rem. Для em используется та же формула, но с размером шрифта родительского элемента, поэтому вложенные значения em перемножаются. rem этого не делает, поскольку всегда отсчитывается от корневого элемента.
Использование rem для размеров шрифта и отступов позволяет масштабировать текст, если пользователь увеличит размер шрифта по умолчанию в настройках браузера. Это помогает людям со слабым зрением. Значения округляются до четырёх знаков после запятой.
Конвертер фрагментов заменяет числа, за которыми следует px. Он не меняет комментарии, url(…) и строки в кавычках, сохраняет 1px, если включить соответствующую настройку (тонкие границы обычно должны оставаться толщиной 1px), заменяет 0px на 0 и по умолчанию не меняет условия @media и @container: в медиазапросах rem и em всегда отсчитываются от исходного размера шрифта браузера, независимо от заданного вами размера корневого шрифта. Конвертер не анализирует семантику calc(), а только заменяет числа px внутри выражения. Это корректно, поскольку каждая длина конвертируется отдельно.
Примеры
Стандартный размер корневого шрифта
При размере корневого шрифта 16px: 12px = 0.75rem, 20px = 1.25rem, 32px = 2rem, 0.5rem = 8px.
Приём с 62.5%
Если в CSS задано html { font-size: 62.5% }, размер корневого шрифта равен 10px, поэтому 14px = 1.4rem, а 24px = 2.4rem. Чтобы учесть это, укажите в поле размера корневого шрифта значение 10.
Преобразование компонента
padding: 24px 16px; border: 1px solid #ddd; преобразуется в padding: 1.5rem 1rem; border: 1px solid #ddd; при включённой настройке «Сохранять значения 1px».
Часто задаваемые вопросы
Что выбрать: rem или em?
В большинстве случаев используйте rem для размеров шрифта, отступов и компоновки: эта единица предсказуемо работает везде. Используйте em, если нужно, чтобы элемент масштабировался относительно размера собственного текста, например для отступов внутри кнопки.
Почему не преобразовывать медиазапросы в rem?
Можно, но в медиазапросе 1rem всегда равен размеру шрифта браузера по умолчанию (обычно 16px), а не размеру, заданному для html. Поэтому конвертер по умолчанию пропускает такие значения. Отключите эту настройку, если всё равно делите значения на 16.
rem лучше, чем px, с точки зрения доступности?
Для размеров шрифта — да: rem учитывает заданный пользователем размер шрифта по умолчанию, а px — нет. Масштабирование страницы в браузере работает с обеими единицами.
Конфиденциальность
Преобразования и фрагмент CSS обрабатываются в браузере и никуда не отправляются.