Новые единицы измерения в 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. На мобильном устройстве:
- Пользователь открывает страницу — адресная строка видна, 100vh = 600px
- Пользователь скроллит вниз — адресная строка скрывается, 100vh всё ещё = 600px, но реальная высота экрана стала 700px
- Контент «прыгает», появляются пустые полосы
Это классическая проблема, с которой сталкивался каждый фронтенд-разработчик.
Решение: три новых 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 {
/<i> Контент всегда помещается на экран </i>/
}
👉 Контент никогда не выйдет за экран, даже на самом маленьком мобильном устройстве.
Пример: форма входа
.login-form {
height: 100svh;
display: flex;
flex-direction: column;
justify-content: center;
padding: 2rem;
}
.login-form\_\_fields {
/<i> Поля формы всегда видны, ничего не обрезается </i>/
}
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 {
/<i> Шапка всегда видна </i>/
}
.page\_\_main {
flex: 1;
/<i> Основной контент занимает оставшееся пространство </i>/
}
.page\_\_footer {
/<i> Футер прижимается к низу </i>/
}
👉 Это прямой и безопасный заменитель 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; /<i> Высота зависит от ширины карточки </i>/
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 уже сегодня. Это простое изменение, которое сразу улучшит опыт пользователей на мобильных устройствах.
Top comments (0)