Конвертер 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).

Был ли этот калькулятор полезен?

ревизия · 20 апреля 2026

ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ

Инструмент справочный — не заменяет эксперта

Только для информационных целей. Все расчёты, результаты и данные, предоставляемые инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.

Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.

Профессиональные решения — медицинские, финансовые, инженерные — должны приниматься только после консультации с квалифицированным специалистом. Не используйте автоматический расчёт как единственное основание для важных решений.

Ограничение ответственности. Авторы и разработчики сервиса не несут ответственности за прямой или косвенный ущерб, возникший из-за использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию результатов.

СМЕЖНЫЕ ИНСТРУМЕНТЫ

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

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

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

Доступность

Компоненты

Calc()

PX (Pixels)

REM (Root EM)

EM

% (проценты)

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

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

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

Инструмент справочный — не заменяет эксперта

Похожие калькуляторы

Калькулятор Responsive Margin/Padding (Clamp generator)

Конвертер типографских единиц

Генератор Cubic Bezier (CSS transition)

Калькулятор теории цвета: гармония, конвертер, палитры, смешивание, дальтонизм

Калькулятор градиентов и интерполяции цветов

Калькулятор контрастности (WCAG), шрифтов и сетки

Калькулятор типографики: Type Scale, межстрочный, Fluid Typography

Генератор цветовых палитр

Калькулятор PPI и DPI (плотность пикселей)

Калькулятор UX-метрик: SUS, NPS, HEART, A/B-тест, эвристики Нильсена

Калькулятор пропорций золотого сечения

Конвертер цветовых пространств

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

Калькулятор DPI и размера печати

Калькулятор размера баннера