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

Введите значение и единицу: напр., 16 + px или 1 + rem
Задайте контекст: корневой/родительский размер шрифта, размер вьюпорта и DPI (влияет на rem/em/vw/vh/pt/cm и т. д.)
Смотрите результаты: остальные единицы считаются мгновенно и доступны для копирования
Брейкпоинты: переключайте mobile/tablet/desktop для проверки на разных экранах

📌 Типовые сценарии

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

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

База: 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 нужно валидировать

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

❓ Вопросы и ответы

Чем rem отличается от em?

rem — от корня (глобальный масштаб), em — от родителя (локальное масштабирование в компоненте)

px или rem?

Для вёрстки/текста лучше rem (a11y); px подходит для пиксель‑точных иконок/границ

Почему vw/vh ведут себя по‑разному на устройствах?

Адресные строки/безопасные зоны/скролл влияют на вьюпорт; комбинируйте с clamp()/min()/max() и брейкпоинтами

Как перевести пиксели экрана в печатные единицы?

Укажите DPI (напр. 96/72/300). Здесь — оценка; для печати используйте ICC/пробу