Конвертер px в rem и em
Переводите пиксели CSS в rem и em мгновенно, с настраиваемыми базовыми размерами шрифта.
Этот бесплатный конвертер помогает фронтенд-разработчикам переводить значения в пикселях в единицы rem и em для адаптивного, доступного CSS. Введите значение в px, rem или em — два других обновятся мгновенно, на основе корневого font-size (для rem) и font-size родителя (для em), которые можно настроить — оба по умолчанию равны стандартным 16px браузера.
Использование rem и em вместо фиксированных пикселей позволяет тексту и отступам корректно масштабироваться, когда пользователь меняет размер шрифта в браузере, что важно для доступности. rem обычно предпочтительнее для большинства макетов, так как всегда масштабируется от единого корневого значения, а em полезен для отступов, которые должны масштабироваться вместе с font-size конкретного компонента.
Часто задаваемые вопросы
В чём разница между px, rem и em?
px — абсолютная единица в пикселях. rem — относительно font-size корневого элемента (html). em — относительно font-size родителя текущего элемента, поэтому его реальное значение в пикселях может меняться в зависимости от места использования.
Как перевести px в rem?
Разделите значение в пикселях на корневой font-size (обычно 16px). Например, 24px ÷ 16px = 1,5rem.
Как перевести rem в px?
Умножьте значение rem на корневой font-size. Например, 1,5rem × 16px = 24px.
Почему 16px — базовый размер по умолчанию?
Большинство браузеров используют 16px как font-size по умолчанию для элемента html, поэтому 1rem равен 16px, если разработчик или пользователь явно это не изменил.
Почему em иногда даёт другой результат, чем rem?
em рассчитывается относительно font-size родительского элемента, а не корня. Если у компонента родитель с font-size, отличным от корневого, перевод того же значения в px в em даст другое число, чем перевод в rem.
Стоит ли использовать rem или em для размера шрифта?
Обычно для размера шрифта рекомендуется rem, поскольку он остаётся предсказуемым независимо от вложенности — каждое значение rem всегда отсылает к одному и тому же корневому font-size, избегая накопительных эффектов.
Когда em полезнее, чем rem?
em полезен для значений, которые должны масштабироваться вместе с font-size конкретного компонента, например отступы внутри кнопки, которые должны расти пропорционально при изменении размера текста кнопки.
Влияет ли изменение корневого font-size на все значения rem на странице?
Да. Поскольку каждая единица rem относительна корневому font-size, изменение этого единственного значения пропорционально масштабирует все измерения на основе rem на странице.
Почему стоит избегать фиксированных пикселей для текста?
Текст с фиксированными пикселями не масштабируется, когда пользователь увеличивает размер шрифта по умолчанию в браузере из соображений доступности, что может затруднить чтение для людей, которым нужен более крупный текст.
Можно ли использовать этот калькулятор для базового размера, отличного от 16px?
Да. Измените поля корневого font-size и font-size родителя в соответствии с настройками вашего проекта CSS, и результаты пересчёта обновятся соответственно.