Конвертер CSS-единиц

Справка

CSS-единицы

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

px, rem, em, vw

px (пиксели) — абсолютная единица. 1px — один аппаратно-независимый пиксель. Используйте для границ, теней и элементов, которые не должны масштабироваться с размером шрифта.

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

em — относительно размера шрифта родительского элемента. Может накапливаться во вложенных элементах. Полезен для отступов, которые должны масштабироваться с размером шрифта самого элемента.

vw (ширина области просмотра) — 1vw = 1% ширины области просмотра. Отлично подходит для текучей типографики и макетов на всю ширину, адаптирующихся к размеру экрана.

Распространённые конвертации px в rem

При стандартной базе браузера 16px: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. Для единиц вьюпорта при дизайне 1440px: 14.4px = 1vw, 72px = 5vw.

Почему rem предпочтителен для доступности

Использование rem для размеров шрифтов учитывает настройки размера шрифта в браузере пользователя. Когда пользователь устанавливает 20px вместо стандартных 16px, макеты на основе rem масштабируются пропорционально, тогда как макеты на основе px остаются фиксированными. WCAG 1.4.4 (Изменение размера текста) требует, чтобы текст можно было увеличить до 200% без потери контента или функциональности — единицы rem удовлетворяют этому требованию естественным образом.

Конфиденциальность

Вся конвертация выполняется 100% в вашем браузере. Никакие данные не отправляются на сервер.