Перейти к содержанию
Логотип CrateX.app

CrateX.app

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

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

Конвертер CSS единиц: Поддерживает преобразование между единицами CSS, такими как px, em, rem, %, vw, vh, обеспечивая настройки адаптивных контрольных точек. Автоматически вычисляет значения, зависящие от контекста, подходит для разработки адаптивных макетов, реализации фронтенда и адаптации стилей.

Пиксели
px
Нажмите, чтобы сменить единицу

Length Units

Typography

Viewport

Percentage

Относительно корневого размера шрифта
rem
Нажмите, чтобы сменить единицу

Length Units

Typography

Viewport

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

Быстрый старт

1
Введите значение и единицу: напр., 16 + px или 1 + rem
2
Сначала выберите единицу «Откуда» и введите значение, затем «Куда»; используйте «Поменять местами» для быстрого переключения.
3
Мобильные: стрелка в правом верхнем углу дровера переключает Откуда/Куда.
4
Доступно для rem/em/%/vw/vh; отключено для абсолютных единиц.
5
Смотрите результаты: остальные единицы считаются мгновенно и доступны для копирования
6
Брейкпоинты: переключайте mobile/tablet/desktop для проверки на разных экранах

Частые сценарии

Где применяется

адаптивная вёрстка, handoff дизайн→разработка, соответствие плотностей/печати, унификация соглашений

Дополнительный сценарий

rem to px, em конвертер и viewport units можно закрыть в одном потоке проверки, чтобы быстрее сверить результат перед копированием или экспортом.

Рекомендации по использованию

База: root 16px распространён и упрощает расчёт rem ↔ px
Текст в rem: удобен для глобального масштабирования/доступности; em — для локального масштабирования в компонентах
Для вёрстки — viewport‑единицы: сочетайте с брейкпоинтами и clamp/min/max
Десятичные/округление: сохраняйте разумную точность для читаемости

Параметры и контекст

REM base (Root Font Size): определяет rem ↔ px. На вебе обычно 16px (1rem≈16px). При другой базе дизайна отрегулируйте.
EM base (Parent Font Size): определяет em и % (при ссылке «размер шрифта»). Подходит для локального масштабирования компонентов.
Ссылка для %: выбирайте «размер шрифта / ширина / высота» в зависимости от контекста (лайаут vs типографика).
Пресеты брейкпоинтов также задают размер вьюпорта для быстрой оценки (не runtime media query).
Размер вьюпорта для vw/vh/vmin/vmax и % (ширина/высота). Реальные устройства влияют адресные строки/безопасные зоны/скроллбары.
DPI: для pt/pc/in/cm/mm/q ↔ px. По умолчанию 96; для печати/HiDPI используйте значение устройства.
Советы: 1) 16px и 96 DPI в качестве баз; 2) проверяйте проценты лайаута переключая брейкпоинты; 3) это оценка на этапе дизайна, не конечный расчёт браузера.

Ограничения и совместимость

% зависит от свойства (width/height/line‑height отличаются); инструмент оценивает типичные случаи
ex/ch зависят от метрик шрифта; различаются по шрифтам/браузерам
Viewport‑единицы зависят от полос прокрутки/адресной строки/безопасных зон; возможны различия
Физические единицы ↔ px зависят от DPI; печать/HiDPI нужно валидировать

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

Вся обработка выполняется в вашем браузере; данные не покидают ваше устройство

Частые вопросы

4

Перейдите к следующему шагу с этими связанными инструментами.