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

CrateX.app

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

Преобразуйте единицы CSS один в один между px, rem, em, %, vw, vh, vmin, vmax, pt, pc, in, cm, mm, q, ex и ch локально, используя размер корневого шрифта, опорный размер шрифта EM, размер области просмотра и настройки базы для процентов. Абсолютные единицы CSS используют фиксированное соотношение 1in = 96px.

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

Единицы длины

Типографика

Окно просмотра

Проценты

rem
Нажмите, чтобы сменить единицу

Единицы длины

Типографика

Окно просмотра

Проценты

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

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

1
Введите значение и выберите исходную единицу
2
Выберите целевую единицу или используйте Обмен для разворота
3
При необходимости настройте root/опорное значение EM/%/viewport; для EM укажите фактический размер шрифта свойства.
4
Скопируйте результат конвертации
5
Переключайте пресеты viewport для проверки vw/vh

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

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

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

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

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

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

База REM (корневой размер шрифта): определяет rem ↔ px. На вебе обычно 16px (1rem≈16px). При другой базе дизайна отрегулируйте.
Опорный размер шрифта EM: укажите размер шрифта, фактически используемый свойством. em обычно использует вычисленный размер шрифта текущего элемента; для font-size и аналогичных свойств, относящихся к размеру шрифта, укажите размер шрифта родительского элемента. Это опорное значение также используется для приблизительного расчёта ex/ch и для %, если выбрана база «Размер шрифта».
Ссылка для %: выбирайте «размер шрифта / ширина / высота» в зависимости от контекста (лайаут vs типографика).
Пресеты брейкпоинтов также задают размер вьюпорта для быстрой оценки (не runtime media query).
Размер вьюпорта для vw/vh/vmin/vmax и % (ширина/высота). Реальные устройства влияют адресные строки/безопасные зоны/скроллбары.
Советы: 1) 16px — распространённый размер корневого шрифта и опорное значение EM, но следует указывать размер шрифта, фактически используемый свойством; 2) проверяйте проценты в макете, переключая точки останова; 3) эти настройки предназначены для предварительной оценки на этапе проектирования и не заменяют окончательные вычисления DOM/CSS в браузере. Абсолютные единицы всегда используют соотношение 1in = 96px.

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

Ссылка % зависит от свойства CSS, содержащего блок, и режима макета; этот инструмент использует для оценки выбранный размер шрифта/ширину области просмотра/высоту области просмотра, а не измерение живого родителя/контейнера.
Значения ex/ch здесь приблизительно рассчитываются на основе опорного размера шрифта EM; результаты не являются анализом метрик шрифта и различаются в зависимости от шрифта и браузера.
Классические vw/vh/vmin/vmax различаются полосами прокрутки/адресными строками/безопасными областями; этот инструмент не рассчитывает единицы запроса dvh/svh/lvh, vi/vb, безопасной области или контейнера.
При преобразовании абсолютных единиц CSS используется фиксированное соотношение 1in = 96px. Сопоставление физических пикселей экрана с размером при печати требует отдельного процесса для устройства или печати, который этот инструмент не предоставляет.

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

Обработка выполняется в вашем браузере. Введённое значение, единицы «Из»/«В», кэшированные значения для отдельных единиц, размер корневого шрифта, опорный размер шрифта EM, область просмотра, база для процентов и выбранная точка останова могут сохраняться в текущем сеансе или хранилище браузера. Если вы сохраните рабочую область или включите синхронизацию WebDAV, эти значения могут быть сохранены в соответствии с настройками синхронизации. Результаты преобразования заново рассчитываются на основе текущего значения, единиц и настроек контекста и не хранятся отдельно. Эта страница не загружает данные по URL-адресам и не отправляет значения на сервер для преобразования. На общих устройствах при необходимости очищайте значения, настройки и данные сайта.

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

4

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

О нас

О нас
Тарифы

Правовая информация

Условия
Политика конфиденциальности
Политика файлов cookie

Настройки

Управление cookie

Вся обработка инструментов выполняется локально в вашем браузере.