Что это такое
VH (viewport height) — это CSS-единица, которая равна одному проценту от текущей высоты окна браузера. Звучит просто, но на практике разработчикам постоянно приходится переводить vh в пиксели, чтобы свериться с макетом из Figma или проверить, как элемент поведёт себя на конкретном устройстве. Конвертер VH в PX делает этот процесс мгновенным: вы указываете значение в vh, а сервис автоматически определяет высоту вьюпорта (или вы выбираете её вручную) и выдаёт точный результат в пикселях.
Как пользоваться
- Откройте страницу конвертера VH в пиксели.
- Введите в поле число в vh — например,
50для половины экрана. - Выберите пресет устройства из списка (iPhone, iPad, десктоп и другие) или задайте высоту viewport вручную в пикселях.
- Нажмите кнопку конвертации — результат появится мгновенно.
- Скопируйте готовое CSS-значение или посмотрите визуальную шкалу, которая показывает, как элемент соотносится с экраном.
- При необходимости повторите операцию для других значений — калькулятор vh работает без перезагрузки страницы.
Кому и когда пригодится
Инструмент полезен верстальщикам, которые работают с адаптивной вёрсткой и хотят быстро сверить проценты с макетом. Дизайнерам он поможет объяснить разработчику, почему блок на 10vh в браузере выглядит не так, как в Figma — просто покажите перевод в px для конкретного экрана. Также конвертер vh выручает при создании hero-секций, полноэкранных слайдеров или модальных окон, где точность критична. Преподаватели и студенты курсов по вёрстке могут использовать его как наглядный пример работы viewport units. Наконец, он пригодится всем, кто пишет CSS-код вручную и хочет избежать ошибок при расчёте высоты элементов.
Плюсы и ограничения
Плюсы:
- Автоопределение viewport — не нужно вводить данные вручную
- 16 готовых пресетов популярных устройств ускоряют работу
- Визуальная шкала помогает понять пропорции без лишних расчётов
- Готовый CSS-код можно скопировать и сразу вставить в проект
- Бесплатно и без регистрации
Ограничения:
- Результат привязан к конкретной высоте экрана — при изменении viewport значение в px станет неактуальным
- Не заменяет понимания относительности vh: на мобильных устройствах с динамической адресной строкой реальная высота может отличаться
- Для точных расчётов в сложных макетах всё равно нужно учитывать отступы и границы элементов
Частые вопросы
Чем vh отличается от vw?
VH привязан к высоте окна браузера, а vw — к его ширине. Если вы повернёте устройство, значение vh останется привязанным к высоте, а vw — к ширине. Конвертер работает только с vh, но принцип перевода в пиксели для vw аналогичен.
Почему 100vh не всегда равно высоте экрана смартфона?
На мобильных устройствах адресная строка браузера появляется и скрывается при прокрутке, из-за чего видимая высота меняется. В таких случаях лучше использовать 100dvh или 100svh, но конвертер vh в px всё равно полезен для базовых расчётов.
Можно ли использовать конвертер для обратного перевода — из px в vh?
Да, просто подставьте нужное значение в пикселях и высоту экрана. Формула проста: px / высоту viewport × 100. Сервис делает это автоматически, если ввести px в соответствующее поле.
Пресеты устройств — это точные значения?
Они основаны на средних размерах экранов популярных моделей. Для точности лучше задать высоту viewport вручную, если вы знаете конкретные характеристики устройства пользователя.
Нужно ли платить за использование?
Нет, конвертер полностью бесплатный — без лимитов на количество конвертаций и скрытых платежей. Можно пользоваться неограниченно как в личных, так и в коммерческих проектах.