52. Современные единицы: dvh, svh, lvh, cqi

CSS: Современные единицы измерения viewport: dvh, svh, lvh, cqi

Иллюстрация к уроку В этом уроке мы познакомимся с современными единицами измерения viewport в CSS, которые призваны решить проблемы адаптивности на мобильных устройствах. Эти единицы, dvh, svh, lvh и cqi, позволяют более точно управлять высотой элементов, особенно в контексте мобильных браузеров с динамически изменяющимися адресными строками.

Что такое dvh, svh, lvh?

Стандартные единицы vh (viewport height) и vw (viewport width) долгое время использовались для определения размеров элементов относительно высоты и ширины видимой области браузера. Однако, на мобильных устройствах, адресная строка браузера может скрываться и появляться, что приводит к изменению высоты viewport и, как следствие, к перерисовке элементов, использующих vh.

Чтобы решить эту проблему, были введены новые единицы:

dvh (dynamic viewport height): Представляет высоту viewport, включая динамические элементы интерфейса пользователя (например, адресную строку), когда она видна. Значение 100dvh соответствует 100% высоты viewport в текущем состоянии.
svh (small viewport height): Представляет высоту viewport, когда динамические элементы интерфейса пользователя полностью отображаются (адресная строка показана). Значение 100svh соответствует 100% высоты viewport, когда видна адресная строка.
lvh (large viewport height): Представляет высоту viewport, когда динамические элементы интерфейса пользователя полностью скрыты (адресная строка скрыта). Значение 100lvh соответствует 100% высоты viewport, когда адресная строка скрыта.

В большинстве случаев, svh будет меньше dvh, а lvh больше dvh. Использование этих единиц позволяет создавать адаптивные макеты, которые корректно отображаются независимо от состояния адресной строки.

Что такое cqi?

cqi (container query units) позволяют задавать размеры элементов относительно размеров их ближайшего контейнера, для которого задано container-type: size. Это позволяет создавать более гибкие и адаптивные компоненты, которые подстраиваются под размеры контейнера, в котором они находятся.

cqw: 1% ширины контейнера.
cqh: 1% высоты контейнера.
cqi: 1% размера в направлении inline (горизонтальном для большинства языков).
cqb: 1% размера в направлении block (вертикальном для большинства языков).
cqmin: меньшее значение из cqi и cqb.
cqmax: большее значение из cqi и cqb.

Примеры кода

<!DOCTYPE html>
<html>
<head>
<title>Viewport Units</title>
<style>
body {
  margin: 0;
  font-family: sans-serif;
}

.container {
  width: 100%;
  height: 100dvh; /* Используем dvh для динамической высоты */
  background-color: #f0f0f0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.box {
  width: 80%;
  max-width: 600px;
  height: 50vh; /* Обычная vh для сравнения */
  background-color: #ddd;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

/* Пример с cqi */
.card-container {
  container-type: size; /* Определяем контейнер для запросов */
  width: 50%;
  border: 1px solid black;
  padding: 10px;
}

.card-title {
  font-size: 5cqw; /* Размер шрифта относительно ширины контейнера */
}

.card-text {
  font-size: 3cqw; /* Размер шрифта относительно ширины контейнера */
}
</style>
</head>
<body>

<div class="container">
  <div class="box">
    <h1>Viewport Units</h1>
    <p>Высота этого блока: 50vh</p>
  </div>
</div>

<div class="card-container">
  <h2 class="card-title">Заголовок карточки</h2>
  <p class="card-text">Текст карточки, адаптированный под размер контейнера.</p>
</div>

</body>
</html>

В этом примере, контейнер .container занимает 100% динамической высоты viewport. Блок .box занимает 50% обычной высоты viewport для сравнения. А элементы внутри .card-container адаптируются к его ширине.

Жизненный пример

Многие современные веб-фреймворки и UI-библиотеки используют dvh, svh и lvh для создания адаптивных компонентов. Например, при разработке модальных окон, фулскрин-навигации или фиксированных элементов интерфейса. Если вы используете, например, React Native Web или аналогичные инструменты, то, скорее всего, столкнетесь с необходимостью учитывать динамическую высоту viewport при стилизации компонентов.

Пример использования cqi: компонент карточки товара, где размер шрифта и отступы автоматически подстраиваются под ширину контейнера, в котором эта карточка находится (например, в сетке товаров на странице).

Ключевые моменты

dvh, svh, и lvh решают проблему изменения высоты viewport из-за адресной строки на мобильных устройствах.
dvh представляет текущую высоту viewport, svh - высоту с видимой адресной строкой, lvh - высоту со скрытой адресной строкой.
cqi позволяет адаптировать размеры элементов относительно их контейнера.
Использование этих единиц делает веб-сайты и приложения более адаптивными и удобными для пользователей мобильных устройств.
Важно тестировать макеты на различных устройствах и браузерах, чтобы убедиться, что они отображаются корректно.