Что такое vh?

Что такое CSS-единица vh?

vh — это CSS-единица измерения, которая означает «1% от высоты области просмотра (viewport height)». Один 1vh равен 1% от текущей высоты окна браузера (или области просмотра в мобильных устройствах). Если высота окна составляет 1000 пикселей, то 1vh будет равен 10 пикселям.

Ключевые особенности и применение

vh особенно полезен для создания адаптивных и полноэкранных интерфейсов. Вот основные сценарии использования:

• Полноэкранные секции или баннеры: Установка высоты элемента в 100vh заставляет его занимать всю высоту окна браузера, независимо от его содержимого.

  .hero-section {
    height: 100vh;
    background: linear-gradient(to bottom, #3498db, #2c3e50);
  }
  

• Адаптивные отступы и размеры: Использование vh для margin, padding или font-size позволяет масштабировать элементы пропорционально высоте окна, что особенно важно на устройствах с разными размерами экранов.

  .container {
    padding-top: 5vh; /* Отступ сверху в 5% от высоты окна */
    font-size: 2vh;   /* Размер шрифта адаптируется к высоте */
  }
  

• Решения для мобильных устройств: На мобильных устройствах vh учитывает всю область просмотра, включая адресную строку и панель инструментов браузера (хотя есть нюансы с их скрытием/появлением).

vh vs % vs px

Важно различать vh и другие единицы:

• vh зависит исключительно от высоты окна браузера.
• % зависит от размеров родительского элемента.
• px представляет фиксированные пиксели и не адаптируется к изменениям окна.

.parent {
  height: 200px;
}

.child-percent {
  height: 50%; /* 100px (50% от 200px) */
}

.child-vh {
  height: 50vh; /* 50% от высоты окна, например 400px при окне в 800px */
}

Проблемы и ограничения

Хотя vh мощная единица, есть важные нюансы:

• Мобильные браузеры и динамические панели: В iOS Safari или Chrome на Android 100vh может включать область, скрытую за адресной строкой. При её скрытии/появлении значения vh не пересчитываются, что может вызывать "прыгающий" интерфейс. Решение — использовать window.innerHeight в JavaScript или CSS-переменные.

  // JS: Установка реальной высоты окна в CSS-переменную
  document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`);
  

  /* CSS: Использование кастомного свойства */
  .element {
    height: calc(var(--vh, 1vh) * 100);
  }
  

• Браузерная совместимость: vh поддерживается всеми современными браузерами, включая IE9+ (хотя в старых версиях IE есть мелкие баги).

Практические советы

1. Комбинируйте единицы: Часто эффективнее комбинировать vh с % или px для более гибкого контроля.

   .modal {
     max-height: 80vh; /* Не более 80% окна */
     width: 90%;       /* Ширина 90% от родителя */
   }
   

2. Используйте для типографики: vh можно применять для адаптивного текста, особенно в крупных заголовках, чтобы они масштабировались с высотой экрана.

   h1 {
     font-size: clamp(2rem, 5vh, 4rem); /* Адаптивный размер с ограничениями */
   }
   

3. Тестируйте на реальных устройствах: Всегда проверяйте поведение vh на мобильных и планшетах, чтобы убедиться в корректном отображении.

Заключение

vh — это незаменимый инструмент в арсенале фронтенд-разработчика для создания по-настоящему адаптивных, полноэкранных интерфейсов. Понимание его работы, преимуществ и ограничений позволяет избежать частых подводных камней (особенно на мобильных устройствах) и использовать единицу максимально эффективно. В сочетании с другими относительными единицами (например, vw для ширины) и современными CSS-методиками (как Flexbox/Grid) vh помогает строить интерфейсы, которые идеально заполняют доступное пространство на любом устройстве.