Конвертер CSS единиц
Преобразуйте единицы CSS один в один между px, rem, em, %, vw, vh, vmin, vmax, pt, cm, mm, q, ex и ch локально с использованием корневого размера шрифта, размера родительского шрифта, области просмотра, DPI и настроек процентного привязки.
Пиксели
px
Нажмите, чтобы сменить единицу
Единицы длины
Типографика
Окно просмотра
Проценты
Относительно корневого размера шрифта
rem
Нажмите, чтобы сменить единицу
Единицы длины
Типографика
Окно просмотра
Проценты
Конвертер CSS единицВведите значение и выберите исходную единицуВыберите целевую единицу или используйте Обмен для разворотаПри необходимости задайте контекст rem/em/%/vw/vhСкопируйте результат конвертацииПереключайте пресеты viewport для проверки vw/vh
Быстрый старт
1
2
3
4
5
Частые сценарии
Где применяется
адаптивная вёрстка, handoff дизайн→разработка, соответствие плотностей/печати, унификация соглашений
Рекомендации по использованию
База: root 16px распространён и упрощает расчёт rem ↔ px
Текст в rem: удобен для глобального масштабирования/доступности; em — для локального масштабирования в компонентах
Используйте единицы просмотра для оценки макета: сочетайте их с точками останова и ограничениями минимального/максимального значения, чтобы избежать крайностей.
Десятичные/округление: сохраняйте разумную точность для читаемости
Параметры и контекст
База REM (корневой размер шрифта): определяет rem ↔ px. На вебе обычно 16px (1rem≈16px). При другой базе дизайна отрегулируйте.
База EM (размер шрифта родителя): определяет em и % при ссылке на размер шрифта. Подходит для локального масштабирования компонентов.
Ссылка для %: выбирайте «размер шрифта / ширина / высота» в зависимости от контекста (лайаут vs типографика).
Пресеты брейкпоинтов также задают размер вьюпорта для быстрой оценки (не runtime media query).
Размер вьюпорта для vw/vh/vmin/vmax и % (ширина/высота). Реальные устройства влияют адресные строки/безопасные зоны/скроллбары.
DPI (точек на дюйм): для физических единиц pt/pc/in/cm/mm/q ↔ px. Оценка CSS по умолчанию составляет 96 точек на дюйм; Пользовательские значения — это оценки печати/устройства, а не окончательные расчеты макета браузера.
Советы: 1) 16 пикселей и 96 точек на дюйм являются общими базами; 2) проверить проценты макета, переключая точки останова; 3) эти элементы управления помогают оценить время разработки и не заменяют окончательные вычисления браузера DOM/CSS.
Ограничения и совместимость
Ссылка % зависит от свойства CSS, содержащего блок, и режима макета; этот инструмент использует для оценки выбранный размер шрифта/ширину области просмотра/высоту области просмотра, а не измерение живого родителя/контейнера.
ex/ch — здесь приблизительные значения, основанные на размере родительского шрифта; результаты не являются проверкой показателей шрифта и различаются в зависимости от шрифта/браузера.
Классические vw/vh/vmin/vmax различаются полосами прокрутки/адресными строками/безопасными областями; этот инструмент не рассчитывает единицы запроса dvh/svh/lvh, vi/vb, безопасной области или контейнера.
Физические единицы ↔ пикселей используют настроенную оценку DPI; Работа печати/HiDPI по-прежнему требует проверки устройства или доказательства
Конфиденциальность и безопасность
Обработка выполняется в браузере. Входное значение, единицы From/To, кэшированные значения по единицам, размер корневого шрифта, размер родительского шрифта, viewport, DPI, процентная ссылка и выбор breakpoint могут оставаться в текущем сеансе браузера или в хранилище браузера. Если вы сохраните рабочую область или включите синхронизацию WebDAV, эти значения могут сохраняться согласно настройкам синхронизации. Результаты преобразования пересчитываются из текущего значения, единиц и настроек контекста, а не сохраняются как отдельные результаты. Эта страница не получает URL и не отправляет значения для серверного преобразования. На общих устройствах при необходимости очистите значения, настройки и данные сайта.
Частые вопросы
rem — от корня (глобальный масштаб), em — от родителя (локальное масштабирование в компоненте)
Для вёрстки/текста лучше rem (a11y); px подходит для пиксель‑точных иконок/границ
Мобильные адресные строки/безопасные области/полосы прокрутки влияют на область просмотра; комбинировать с точками останова и ограничениями мин/макс.
Укажите DPI (напр. 96/72/300). Здесь — оценка; для печати используйте ICC/пробу