Конвертер процентов в VH: перевод CSS % в viewport height онлайн

Что это такое

Проценты в CSS — удобная, но коварная единица: они всегда считаются от ширины родительского блока. Когда нужно привязать высоту элемента к окну браузера, проценты начинают «плыть». Конвертер процентов в vh решает эту задачу мгновенно: вводите значение в %, указываете ширину родителя — и получаете эквивалент в vh (viewport height). Это как автоматический переводчик между двумя системами координат в адаптивной верстке.

Как пользоваться

1. Введите процент — например, 50 для половины родительского блока.
2. Укажите ширину родителя — в пикселях или через пресет устройства (iPhone, десктоп, планшет).
3. Выберите базовую высоту viewport — обычно это 100vh, но можно подставить конкретное значение (например, 800px).
4. Нажмите «Конвертировать» — калькулятор покажет точное значение в vh.
5. Скопируйте готовый CSS — инструмент сразу соберет строку вида height: 45vh; с комментарием.
6. Визуально сравните — встроенная схема покажет, как элемент будет выглядеть на разных экранах.

Кому и когда пригодится

• Верстальщикам — при создании секций с полноэкранными блоками, когда нужно, чтобы элемент занимал ровно 40% высоты окна, а не родителя.
• Разработчикам лендингов — для hero-блоков, которые должны подстраиваться под любой монитор без медиазапросов.
• Дизайнерам-фрилансерам — чтобы быстро проверить, как макет из Figma (в процентах) ляжет на реальный viewport.
• Командам, работающим с iframe и виджетами — когда внутренние элементы должны масштабироваться относительно окна, а не контейнера.
• Тестировщикам адаптивности — для проверки поведения элементов на нестандартных разрешениях.

Плюсы и ограничения

Плюсы:

• Экономит время — не нужно вручную вычислять через пропорции.
• Учитывает разницу между % (от родителя) и vh (от окна).
• Дает готовый CSS-код с префиксами для старых браузеров.
• Работает с пресетами популярных устройств — удобно для мобильной верстки.
• Визуализация помогает понять, как изменение vh влияет на макет.

Ограничения:

• Не заменяет понимания контекста: vh зависит от реальной высоты окна, которая меняется на мобильных (адресная строка браузера).
• Значение в vh не масштабируется при изменении ширины родителя — это фиксированная единица.
• Для сложных макетов с вложенными контейнерами лучше использовать calc() и CSS-переменные.

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

Чем vh отличается от процентов?

Проценты (%) всегда вычисляются от размеров родительского элемента — его высоты, ширины или других свойств. Единица vh привязана к высоте окна браузера (viewport height). Один vh равен 1% от текущей высоты окна. Поэтому height: 50% даст половину родителя, а height: 50vh — ровно половину видимой области экрана.

Почему конвертер просит ширину родителя?

Потому что проценты зависят от контекста. Если родитель имеет ширину 1200px, то 10% — это 120px. Чтобы перевести эти 120px в vh, нужно знать высоту окна. Конвертер делает цепочку: процент → пиксели (через ширину родителя) → vh (через высоту viewport).

Можно ли использовать vh для высоты, а проценты — для ширины?

Да, это частый паттерн в адаптивной верстке. Например, ширина карточки — 30% (от родителя), а высота — 25vh (от окна). Так вы получаете элемент, который тянется по ширине контейнера, но не ломается при изменении высоты экрана.

Что такое «пресеты устройств» в инструменте?

Это готовые значения ширины родителя и высоты viewport для конкретных девайсов: iPhone 14 (390×844), iPad (768×1024), десктоп (1920×1080) и так далее. Вместо ручного ввода цифр вы выбираете устройство — и конвертер сразу считает для его параметров.

Влияет ли мобильная адресная строка на vh?

Да, это главный подводный камень. На мобильных браузерах адресная строка скрывается при прокрутке, поэтому реальная высота viewport меняется. Значение 100vh может оказаться больше видимой области. Для критичных случаев используйте 100dvh (dynamic viewport height) или 100svh — но конвертер работает с классическими vh, которые проще для расчетов.