Что это такое
VW (viewport width) — это CSS-единица, которая равна 1% от текущей ширины окна браузера. Но когда нужно распечатать макет, оценить физический размер элемента на экране или согласовать вёрстку с дизайнером, привычные пиксели и проценты перестают работать — нужны реальные сантиметры. Конвертер VW в CM решает эту задачу: он переводит относительные единицы в абсолютные, учитывая плотность пикселей (DPI) и физическую ширину вашего монитора. Вместо приблизительных прикидок «на глаз» вы получаете точное значение в одной из шести систем измерения: от миллиметров до дюймов.
Как пользоваться
- Введите числовое значение VW, которое нужно перевести (например,
25). - Укажите ширину вьюпорта в пикселях — либо вручную, либо выбрав пресет устройства (iPhone, десктоп, планшет).
- Настройте DPI вашего экрана (стандартные 96 DPI подойдут для большинства Windows-мониторов, для Mac лучше взять 110).
- Нажмите «Конвертировать» — результат появится сразу во всех единицах: cm, mm, px, in, pt, rem и em.
- При необходимости скопируйте нужное значение или пересчитайте для другого устройства, изменив пресет.
Кому и когда пригодится
Инструмент полезен всем, кто работает с адаптивной вёрсткой и сталкивается с задачей перевода CSS-размеров в физические величины. Верстальщики используют его, чтобы проверить, не выйдет ли шрифт или блок за пределы печатной области при экспорте в PDF. UI-дизайнеры сверяют макеты в Figma с реальными размерами на мониторе клиента, когда тот просит «сделать кнопку 3 сантиметра». Полезен конвертер и frontend-разработчикам, которые настраивают media queries для конкретных устройств — например, чтобы понять, какой физический размер занимает контейнер в 50vw на ультрабуке с 13-дюймовым экраном. Наконец, это незаменимая вещь для создания печатных стилей (CSS @media print), где все размеры должны указываться в абсолютных единицах.
Плюсы и ограничения
Преимущества:
- Мгновенный перевод VW в сантиметры и ещё 6 единиц измерения — не нужно гуглить формулы и запоминать коэффициенты.
- Учёт DPI и ширины экрана даёт точность под конкретное устройство, а не усреднённые значения.
- Пресеты популярных устройств ускоряют работу — не придётся каждый раз вводить параметры вручную.
- Результат в pt и rem помогает при подготовке макета к печати или для пересчёта в относительные величины.
Ограничения:
- Физический размер VW зависит от реального экрана пользователя — на разных мониторах один и тот же код будет выглядеть по-разному.
- Значение DPI в браузере — величина приблизительная, особенно на Windows с масштабированием 125–150%.
- Конвертер не учитывает scrollbar и браузерные рамки, поэтому на практике погрешность может достигать 2–3%.
Частые вопросы
Почему 1vw не всегда равен одному и тому же сантиметру?
Потому что VW привязан к ширине окна браузера в пикселях, а физический размер пикселя зависит от плотности экрана (DPI). На 27-дюймовом мониторе с разрешением 1920px один пиксель крупнее, чем на 24-дюймовом с тем же разрешением. Отсюда и разница в сантиметрах.
Какой DPI указывать для ноутбука?
Для большинства Windows-ноутбуков с масштабированием 100% — это 96 DPI. Если в настройках Windows стоит масштаб 125% или 150%, умножьте базовое значение на соответствующий коэффициент: получится 120 или 144 DPI.
Можно ли использовать результат для печатных стилей?
Да, это один из лучших сценариев применения. Для печати лучше переводить VW в см или мм, так как эти единицы поддерживаются всеми браузерами в @media print и не зависят от экрана пользователя.
Чем VW отличается от процентов?
Проценты считаются от родительского элемента, а VW — всегда от ширины вьюпорта. Если родитель занимает половину экрана, то 50% будут равны 25vw. Конвертер работает именно с viewport width, что удобно для глобальных контейнеров.
Что делать, если нужно перевести не VW, а VH или VMIN?
Принцип тот же — возьмите высоту экрана или минимальную из сторон вместо ширины и подставьте в конвертер как ширину вьюпорта. Точность сохранится, так как формула пересчёта идентична.