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

Мгновенный перевод PX в REM/EM и обратно. Помощник по функции calc(). Стандарты современной адаптивной верстки.

Загрузка калькулятора...

Standard

W3C Spec

16px

Default Base

99%

Browser Support

A11y

Friendly

Почему важны относительные единицы?

В современной веб-разработке уход от жестких пикселей (PX) к относительным единицам (REM, EM) — это стандарт доступности (A11y) и адаптивности. Это позволяет интерфейсам корректно масштабироваться под настройки пользователя и разные устройства.

📱

Адаптивность

Интерфейс подстраивается под базовый размер шрифта устройства пользователя.

👁️

Доступность

Пользователи с плохим зрением могут увеличивать шрифт в браузере, и верстка не сломается.

🧩

Компоненты

REM и EM позволяют создавать модульные компоненты, сохраняющие пропорции.

⚡

Calc()

Динамические вычисления значений прямо в браузере для сложных макетов.

PX (Pixels)

Абсолютная единица. 1px равен 1/96 дюйма. Значения в пикселях жестко фиксированы и не зависят от настроек браузера. Используйте для границ (border) и теней, но избегайте для размеров шрифта и контейнеров.

REM (Root EM)

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

EM

Относительная единица. 1em равен размеру шрифта текущего элемента (или родительского, если задано на текущем). Удобен для задания margins и paddings, зависящих от размера текста внутри компонента.

% (Проценты)

Относительная величина. Проценты рассчитываются от значения свойства родительского блока. Идеальны для создания сеток и резиновых макетов.

Зачем нужен CSS calc()?

Функция calc() позволяет выполнять математические операции (+, -, *, /) прямо в CSS свойствах. Это мощный инструмент для смешивания разных единиц измерения.

width: calc(100% - 20px)

Полная ширина минус фиксированный отступ

margin-left: calc(50% - 150px)

Центрирование блока шириной 300px

font-size: calc(1rem + 1vw)

Адаптивная типографика (Fluid Typography)

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

Большинство современных браузеров устанавливают базовый размер шрифта (font-size) для элемента <html> равным 16px. Это исторический стандарт. Однако пользователь может изменить это значение в настройках браузера, поэтому 1rem может быть и 20px, и 24px.

Используйте REM для глобальных размеров (шрифт, отступы между секциями), чтобы они зависели только от настройки корня. Используйте EM для локальных размеров внутри компонента (отступ иконки от текста, padding кнопки), если вы хотите, чтобы компонент масштабировался как единое целое при изменении его font-size.

Обычно нет. Тонкие линии (border) часто оставляют в px, так как они должны оставаться тонкими и четкими независимо от масштабирования текста. Но для толстых декоративных границ можно использовать rem.

Браузеры оптимизированы для calc(), и он работает очень быстро. Вычисления происходят на этапе layout. Это намного эффективнее, чем вычислять размеры через JavaScript.

Это базовый размер шрифта, от которого отталкиваются REM вычисления. По умолчанию это 16px. Если вы в своем CSS установили `html { font-size: 62.5%; }`, то ваш базовый размер будет 10px (10px — это 62.5% от 16px), что упрощает расчеты (1rem = 10px).

Создатель

Лиана Арифметова

Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».