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

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

16px(16px)

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

Введите значение:

Единица измерения:

Округление:

Таблица конвертации

16.0000

rem

1.0000

100.0000

Таблица предустановленных значений

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

px	rem	em	%
4px	0.2500rem	0.2500em	25.0000%
6px	0.3750rem	0.3750em	37.5000%
8px	0.5000rem	0.5000em	50.0000%
10px	0.6250rem	0.6250em	62.5000%
12px	0.7500rem	0.7500em	75.0000%
14px	0.8750rem	0.8750em	87.5000%
16px	1.0000rem	1.0000em	100.0000%
18px	1.1250rem	1.1250em	112.5000%
20px	1.2500rem	1.2500em	125.0000%
24px	1.5000rem	1.5000em	150.0000%
28px	1.7500rem	1.7500em	175.0000%
32px	2.0000rem	2.0000em	200.0000%
36px	2.2500rem	2.2500em	225.0000%
40px	2.5000rem	2.5000em	250.0000%
48px	3.0000rem	3.0000em	300.0000%
56px	3.5000rem	3.5000em	350.0000%
64px	4.0000rem	4.0000em	400.0000%
72px	4.5000rem	4.5000em	450.0000%
80px	5.0000rem	5.0000em	500.0000%
96px	6.0000rem	6.0000em	600.0000%

Онлайн конвертер единиц CSS: px, rem, em и % — Полное руководство

В современной веб-разработке адаптивность и доступность интерфейсов играют ключевую роль. Наш CSS Unit Converter — это мощный инструмент для frontend-разработчиков и веб-дизайнеров, который автоматизирует расчеты размеров шрифтов и отступов. Забудьте о калькуляторе и ручных формулах: конвертируйте px в rem, em или проценты мгновенно.

Как работает конвертер CSS?

Инструмент работает в двух режимах, закрывая все потребности верстальщика: от перевода одного значения до обработки целых фрагментов кода.

Базовый размер шрифта (Base Font Size)

Все относительные единицы (rem, em, %) зависят от базового размера шрифта. По стандарту в браузерах это 16px, но в дизайн-системах часто используются 14px, 18px или 20px. Наш инструмент позволяет задать любой базовый размер и сохраняет его в настройках табов. Вы можете создать отдельные вкладки для разных проектов и переключаться между ними без потери контекста.

Мгновенная конвертация (Unit Converter)

Просто введите значение в любое поле (например, в пикселях), и калькулятор автоматически пересчитает его в остальные единицы:

PX (Pixels): Абсолютная единица, точная и предсказуемая.
REM (Root EM): Относительно корневого элемента <html>. Стандарт для адаптивной типографики.
EM: Относительно родительского элемента. Идеально для масштабируемых компонентов.
% (Procents): Процентное соотношение от базового размера.

Конвертация CSS кода с учетом вложенности

Уникальная функция нашего сервиса — режим CSS Code Converter. Вставьте готовый CSS-код, выберите направление конвертации (например, из px в rem), и алгоритм переработает весь код. Инструмент учитывает вложенность селекторов и свойство font-size у родителей, чтобы корректно рассчитать сложные значения em.

PX vs REM vs EM: Что выбрать?

Понимание разницы между единицами измерения критически важно для качественной верстки.

Почему стоит использовать REM вместо PX?

Использование rem позволяет пользователям масштабировать интерфейс через настройки браузера (например, для слабовидящих). Если сайт сверстан жестко в px, изменение размера шрифта в браузере не повлияет на верстку, что ухудшает доступность (a11y).

Когда использовать EM?

Единица em полезна для создания компонентов, где отступы (padding, margin) должны зависеть от размера шрифта самого элемента. Однако с em нужно быть осторожным из-за эффекта каскадного наследования (compounding). Наш конвертер помогает отслеживать эти зависимости.

Преимущества нашего инструмента

Мультизадачность: Система табов позволяет работать над несколькими проектами одновременно, сохраняя настройки для каждого.
Сохранение прогресса: Все данные, включая активный таб и настройки округления, автоматически сохраняются в LocalStorage браузера. Вы не потеряете данные при перезагрузке страницы.
Гибкая настройка: Выбирайте точность округления (количество знаков после запятой), чтобы код соответствовал стандартам вашей команды.