Новые единицы измерения в CSS (2025–2026): конец боли с vh, vw и мобильными браузерами

Если ты когда-нибудь писал:

height: 100vh;

и видел:

• прыгающий контент на мобильных устройствах,
• обрезанный низ страницы,
• или странное поведение при скролле,

— поздравляю, ты столкнулся с устаревшей моделью viewport.

В 2025–2026 CSS наконец это исправил.

---

Почему старые vh / vw — проблема

Что такое vh на самом деле

1vh = 1% от высоты viewport

Но на мобильных браузерах viewport нестабилен:

• адресная строка появляется и исчезает при скролле
• высота viewport постоянно меняется
• 100vh каждый раз становится разным значением

Результат:

• layout скачет вверх-вниз
• fixed-блоки «уезжают» за пределы экрана
• модалки не влезают полностью

Реальный пример проблемы

Представь ситуацию: у тебя есть hero-секция с height: 100vh. На мобильном устройстве:

1. Пользователь открывает страницу — адресная строка видна, 100vh = 600px
2. Пользователь скроллит вниз — адресная строка скрывается, 100vh всё ещё = 600px, но реальная высота экрана стала 700px
3. Контент «прыгает», появляются пустые полосы

Это классическая проблема, с которой сталкивался каждый фронтенд-разработчик.

---

Решение: три новых viewport-единицы

CSS ввёл три типа viewport-высоты, которые решают эту проблему:

Единица	Что означает
svh	Small Viewport Height
lvh	Large Viewport Height
dvh	Dynamic Viewport Height

Разберём каждую по порядку.

---

svh — Small Viewport Height (минимальная высота)

height: 100svh;

Что это значит

• Берётся минимально возможная высота viewport
• То есть: адресная строка всегда видна
• Высота не меняется при скролле — стабильна

Когда использовать

• ✔ формы входа и регистрации
• ✔ модальные окна
• ✔ fixed-элементы навигации
• ✔ экраны, где важно ничего не обрезать

Практический пример: модальное окно

.modal {
  max-height: 100svh;
  overflow-y: auto;
  padding: 1.5rem;
}

.modal__content {
  /* Контент всегда помещается на экран */
}

👉 Контент никогда не выйдет за экран, даже на самом маленьком мобильном устройстве.

Пример: форма входа

.login-form {
  height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

.login-form__fields {
  /* Поля формы всегда видны, ничего не обрезается */
}

---

lvh — Large Viewport Height (максимальная высота)

height: 100lvh;

Что это значит

• Берётся максимально возможная высота viewport
• Адресная строка скрыта
• Используется всё доступное пространство экрана

Когда использовать

• ✔ hero-блоки на лендингах
• ✔ landing-экраны
• ✔ fullscreen-секции
• ✔ презентационные слайды

Практический пример: hero-секция

.hero {
  min-height: 100lvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.hero__title {
  font-size: clamp(2rem, 5vw, 4rem);
}

👉 Экран выглядит максимально большим, без пустых полос сверху и снизу.

Пример: fullscreen-галерея

.gallery {
  height: 100lvh;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
  overflow-y: auto;
}

---

dvh — Dynamic Viewport Height (динамическая)

height: 100dvh;

Что это значит

• Высота меняется динамически в реальном времени
• Реагирует на:
  • появление и исчезновение адресной строки
  • изменение ориентации устройства
  • системные UI-элементы (панели, меню)

Когда использовать

• ✔ основной layout страницы
• ✔ страницы со скроллом
• ✔ одностраничные приложения (SPA)
• ✔ статические сайты

Пример (рекомендованный по умолчанию)

.page {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.page__header {
  /* Шапка всегда видна */
}

.page__main {
  flex: 1;
  /* Основной контент занимает оставшееся пространство */
}

.page__footer {
  /* Футер прижимается к низу */
}

👉 Это прямой и безопасный заменитель 100vh для большинства случаев.

Пример: адаптивный layout

.container {
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.header {
  padding: 1rem;
}

.main {
  padding: 2rem;
  overflow-y: auto;
}

.footer {
  padding: 1rem;
}

---

Короткое сравнение (очень важно)

Задача	Что использовать	Почему
Fullscreen hero	100lvh	Максимальное использование пространства
Основной layout	100dvh	Адаптируется к изменениям viewport
Модалки / формы	100svh	Гарантирует, что ничего не обрежется
Старый код	❌ 100vh	Устарело, вызывает проблемы

---

Новые единицы ширины (svw / lvw / dvw)

Работают абсолютно аналогично, но по ширине экрана.

width: 100dvw;

Когда использовать

Используются реже, чем единицы высоты, но полезны для:

• horizontal layouts (горизонтальные макеты)
• fullscreen canvas (полноэкранные канвасы)
• mobile web-apps (мобильные веб-приложения)

Пример: горизонтальный слайдер

.slider {
  width: 100dvw;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.slider__slide {
  width: 100dvw;
  scroll-snap-align: start;
}

---

Container-relative units (cqw, cqh, cqi, cqb)

Это очень важная новинка для компонентного подхода.

Что это

Единицы, зависящие от размера контейнера, а не экрана. Работают только внутри элементов с container-type.

Единица	Значение
cqw	1% ширины контейнера
cqh	1% высоты контейнера
cqi	inline-размер
cqb	block-размер

Базовый пример

.card {
  container-type: inline-size;
}

.card h2 {
  font-size: 5cqw;
}

👉 Заголовок масштабируется от ширины карточки, а не окна браузера.

Практический пример: адаптивная типографика

.article {
  container-type: inline-size;
  max-width: 800px;
}

.article h1 {
  font-size: clamp(1.5rem, 8cqw, 3rem);
}

.article p {
  font-size: clamp(1rem, 2cqw, 1.125rem);
  line-height: 1.6;
}

Теперь типографика адаптируется к ширине контейнера статьи, а не всего экрана.

Пример: карточка товара

.product-card {
  container-type: inline-size;
  border: 1px solid #ddd;
  border-radius: 12px;
  padding: 1rem;
}

.product-card__image {
  width: 100%;
  height: 30cqw; /* Высота зависит от ширины карточки */
  object-fit: cover;
  border-radius: 8px;
}

.product-card__title {
  font-size: clamp(1rem, 4cqw, 1.5rem);
  margin-top: 0.75rem;
}

.product-card__price {
  font-size: clamp(1.25rem, 5cqw, 2rem);
  font-weight: 700;
  margin-top: 0.5rem;
}

Карточка выглядит пропорционально независимо от того, находится ли она в сетке из 3 колонок или в одной колонке на мобильном.

---

Когда container units реально полезны

• ✔ карточки товаров и статей
• ✔ виджеты в сайдбарах
• ✔ компоненты в CMS
• ✔ модульные блоки в компонентных фреймворках
• ✔ адаптивные формы

Это логичное продолжение Container Queries — теперь не только layout, но и размеры могут зависеть от контейнера.

---

Поддержка браузеров (актуально на 2025–2026)

Viewport units (svh / lvh / dvh)

• Google Chrome — ✅ (начиная с версии 108)
• Microsoft Edge — ✅ (начиная с версии 108)
• Mozilla Firefox — ✅ (начиная с версии 101)
• Apple Safari — ✅ (начиная с версии 15.4)

👉 Можно использовать в продакшене без опасений.

Container units (cqw, cqh, …)

• Chrome / Edge — ✅ (начиная с версии 105)
• Firefox — ✅ (начиная с версии 110)
• Safari — ✅ (начиная с версии 17+)

👉 Уже безопасны, если не поддерживаешь древние версии браузеров.

---

Практические рекомендации (запомни)

❌ Не делай так

.page {
  height: 100vh;
}

Проблема: на мобильных устройствах будет скакать layout.

✅ Делай так

.page {
  min-height: 100dvh;
}

Решение: динамически адаптируется к изменениям viewport.

---

❌ Не фиксируй модалки жёстко

.modal {
  height: 100vh;
  overflow: hidden;
}

Проблема: на мобильных устройствах контент может обрезаться.

✅ Правильно

.modal {
  max-height: 100svh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.modal__header {
  flex-shrink: 0;
}

.modal__body {
  flex: 1;
  overflow-y: auto;
}

.modal__footer {
  flex-shrink: 0;
}

Решение: модалка всегда помещается на экран, контент прокручивается внутри.

---

❌ Не масштабируй UI от экрана

.card h2 {
  font-size: 4vw;
}

Проблема: размер зависит от ширины всего окна, а не карточки. В сетке из 3 колонок заголовок будет слишком маленьким.

✅ Масштабируй от контейнера

.card {
  container-type: inline-size;
}

.card h2 {
  font-size: clamp(1.25rem, 5cqw, 2rem);
}

Решение: размер зависит от ширины самой карточки, выглядит пропорционально в любой сетке.

---

Дополнительный пример: адаптивная сетка

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.grid-item {
  container-type: inline-size;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
}

.grid-item__icon {
  width: 15cqw;
  height: 15cqw;
  margin-bottom: 1rem;
}

.grid-item__title {
  font-size: clamp(1.125rem, 4cqw, 1.5rem);
}

.grid-item__text {
  font-size: clamp(0.875rem, 2cqw, 1rem);
  margin-top: 0.5rem;
}

Каждый элемент сетки адаптируется независимо от других.

---

Итог — кратко и честно

• vh / vw — устарели концептуально, вызывают проблемы на мобильных
• dvh / svh / lvh — новая норма для работы с высотой viewport
• dvw / svw / lvw — аналогично для ширины
• container-units (cqw, cqh) — будущее компонентного UI
• мобильная вёрстка перестала быть болью

CSS в 2025–2026 — это наконец предсказуемая система, а не набор хаков и обходных решений.

Рекомендация: начни использовать dvh вместо vh уже сегодня. Это простое изменение, которое сразу улучшит опыт пользователей на мобильных устройствах.