Реклама мешает? Идти Без рекламы Сегодня 

Конвертер Пикселей / REM / EM (CSS Единицы)

РазработчикТекст

РЕКЛАМА · УДАЛЯТЬ?

ВХОД

Автоматический процесс

Пиксели (px)

REM

Пункты (pt)

Предустановки

Настройки

Базовый Размер Шрифта (px)

: 16

Размер Шрифта Родителя (px)

Используется для расчета EM (EM относительно размера шрифта родительского элемента)

ВЫХОД

Клиентская сторона

Единицы Просмотра

Просмотр	vw	vh
360px (Мобильный)
768px (Планшет)
1280px (Ноутбук)
1920px (Десктоп)

Справочная Таблица

Пиксели	REM	EM	PT
8px
10px
12px
14px
16px
18px
20px
24px
32px
48px
64px

РЕКЛАМА · УДАЛЯТЬ?

Гид

Конвертер Пикселей / REM / EM

Мгновенно конвертируйте между CSS единицами: пикселями (px), корневыми em (rem) и em. Настройте базовый размер шрифта и наблюдайте, как все значения обновляются в реальном времени. Идеально для фронтенд-разработчиков, переводящих спецификации дизайна в CSS.

Как использовать

Введите значение в любое из трех полей единиц — px, rem или em — и два других обновятся мгновенно. Настройте базовый размер шрифта (по умолчанию 16px) с помощью ползунка или поля ввода, чтобы он соответствовал корневому размеру шрифта вашего проекта. Таблица справки ниже показывает распространенные преобразования с первого взгляда.

Функции

Двунаправленное преобразование – Редактируйте px, rem или em, и все остальные обновляются мгновенно
Регулируемый Базовый Размер Шрифта – Ползунок и поле ввода синхронизируются, по умолчанию 16px
Справочная Таблица – Распространенные размеры автоматически рассчитываются для вашего базового размера шрифта
Обновления в Реальном Времени – Ввод с ограничением частоты для плавной работы
Только на стороне клиента – Данные не отправляются ни на какой сервер

РЕКЛАМА · УДАЛЯТЬ?

 Часто задаваемые вопросы

В чем разница между rem и em в CSS?

rem (root em) относительно размера шрифта корневого элемента (html), что делает его последовательным на всей странице. em относительно размера шрифта родительского элемента, что может накапливаться во вложенных элементах. rem обычно предпочтительнее для согласованности макета.
Почему 1rem по умолчанию равен 16px?

Браузеры устанавливают размер шрифта корневого элемента по умолчанию 16px, если он не переопределен. Таким образом, 1rem = 16px, 0.5rem = 8px, 1.5rem = 24px. Если вы установите html { font-size: 62.5%; }, то 1rem = 10px, что упрощает расчеты.
Когда следует использовать px вместо rem или em?

Используйте px для значений, которые не должны масштабироваться в зависимости от предпочтений пользователя к шрифту, таких как границы, тени или точки останова медиа-запросов. Используйте rem для размеров шрифтов и отступов, чтобы ваш макет учитывал настройки доступности пользователя. Используйте em для размеров, относительно компонентов.
Как масштабирование браузера влияет на CSS единицы?

Масштабирование браузера пропорционально масштабирует все CSS единицы, включая px. Это отличается от масштабирования текста на уровне ОС. Однако, если пользователь изменяет размер шрифта браузера по умолчанию, значения rem и em корректируются, а значения px — нет, что делает rem/em лучше для доступности.