---
description:
  Адаптивность VKUI позволяет в зависимости от ширины и высоты экрана, а также на основе типа ввода
  автоматически адаптировать внешний вид компонентов.
---

<Overview type="doc">
# Адаптивность

В зависимости от ширины и высоты экрана, а также от наличия устройства с точным указателем (например, мышь или стилус), компоненты
VKUI автоматически адаптируют свой внешний вид одним из двух способов:

1. Меняют размеры на **компактные** или **базовые** (далее – `compact` и `regular`).
2. Изменяют свою вёрстку и поведение.

В этой документации вы узнаете:

- Какие существуют параметры адаптивности?
- Как переопределить адаптивность — глобально и локально?
- Как создавать собственные адаптивные интерфейсы?

</Overview>

## Параметры адаптивности [#adaptivity-props]

Для реализации адаптивности библиотека использует несколько подходов.

| Подход                                      | Реализация в коде          |
| ------------------------------------------- | -------------------------- |
| ↓ [Изменение размеров интерфейса](#density) | `density`                  |
| ↓ [Изменение вёрстки](#breakpoints)         | `viewWidth` и `viewHeight` |
| ↓ [Изменение поведения](#pointer)           | `hasPointer`               |

### Размеры элементов интерфейса [#density]

> До версии `v8.0.0` было два отдельных свойства `sizeX` и `sizeY` (см. [документацию `v7.11.0`](/7.11.0/overview/adaptivity#sizes)).
> Так как `sizeX` был своего рода псевдонимом под `ViewWidth.MOBILE` и `ViewWidth.SMALL_TABLET` и больше путало разработчиков, было
> решено отказаться от этого свойства в пользу одного.

Чтобы сделать интерфейс удобным как на настольных устройствах, так и на мобильных, большинство компонентов имеют два режима размера:
`compact` и `regular`.

- `compact` активируется, когда у пользователя **большой экран** и **есть точный указатель** (например, мышь). В этом режиме
  используются меньшие соотношения размеров, чтобы на экране помещалось больше элементов интерфейса — их не нужно прятать за меню
  или скрывать.
- `regular` включается, если у пользователя **ограниченная область экрана** и **отсутствует точный указатель** (используется
  сенсорный экран). В этом случае элементы становятся крупнее, чтобы по ним было удобно попадать пальцем.

Для реализации этого подхода в библиотеке создано свойство `density`, который принимает `compact` или `regular`.

Если значение не задано, то оно будет зависеть от [@media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) в CSS и
[matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) в JS. Помимо ширины и высоты экрана, также
зависит от наличия точного указателя.

| Значение  | Условие                                                                                                                                  |
| --------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `compact` | `высота < 415px`,<br/>или<br/>`мышь / стилус` и `ширина >= 768px`                                                                        |
| `regular` | `высота >= 415px` и `сенсорный экран`,<br/>или<br/>`высота >= 415px` и `нет указателя`,<br/>или<br/>`высота >= 415px` и `ширина < 768px` |

### Размеры экрана [#breakpoints]

От размера экрана может полностью меняться вёрстка компонента, чтобы обеспечить для пользователя привычный для него интерфейс.
Например, [`ModalPage`](/components/modal-page) на мобильном экране будет выезжающей снизу верх панелью, а на настольном – диалоговым
окном по центру экрана.

Под определение размеров экрана есть два свойства `viewWidth` и `viewHeight`, значения которых являются брейкпоинтами. В CSS они
реализованы через [@media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media), в JS через
[matchMedia()](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).

<Callout>

На текущий момент библиотека не даёт возможностей переопределять брейкпоинты.

</Callout>

#### `viewWidth`

| Брейкпоинт   | Условие            |
| ------------ | ------------------ |
| DESKTOP      | `ширина >= 1280px` |
| TABLET       | `ширина >= 1024px` |
| SMALL_TABLET | `ширина >= 768px`  |
| MOBILE       | `ширина >= 320px`  |
| SMALL_MOBILE | `ширина < 320px`   |

#### `viewHeight`

| Брейкпоинт  | Условие           |
| ----------- | ----------------- |
| MEDIUM      | `высота >= 720px` |
| SMALL       | `высота >= 415px` |
| EXTRA_SMALL | `высота < 415px`  |

### Наличие точного указателя [#pointer]

Помимо изменение вёрстки в зависимости от размеров экрана, важно сохранить и привычное взаимодействие с интерфейсом.

Возьмём поведение, когда элемент интерфейса должен появляться на момент наведения. Если при подключенной мышке или стилусе это
поведение оправдано, то на сенсорном экране это уже антипаттерн. Поэтому, например, подкомпонент [Avatar.Overlay](/components/avatar#наложение),
в зависимости от наличия устройства с точным указателем, будет показываться либо всегда, либо только по наведению.

Наличие точного указателя определяет свойство `hasPointer`.

#### `hasPointer`

В CSS реализовано через [@media (pointer: fine)](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer#fine), а в JS через
`hasMouse` из [@vkontakte/vkjs](https://www.npmjs.com/package/@vkontakte/vkjs)

## Переопределение адаптивности [#override]

Если есть необходимость всегда иметь конкретные размеры, вёрстку или поведение, то есть возможность зафиксировать параметры на
конкретных условиях. Это можно сделать с помощью провайдера [`AdaptivityProvider`](/components/adaptivity-provider).

- см. [AdaptivityProvider | Глобальное переопределение](/components/adaptivity-provider#override-global)
- см. [AdaptivityProvider | Локальное переопределение](/components/adaptivity-provider#override-local)

## Утилиты для создания адаптивных интерфейсов [#utils]

Есть следующие утилиты, перечисленные по приоритету использования:

1. Хук [`useAdaptivityConditionalRender`](/components/use-adaptivity-conditional-render) – используйте, когда нужно показать или
   скрыть элемент интерфейса по брейкпоинту.
1. Компонент [`AdaptiveIconRenderer`](/components/adaptive-icon-renderer) – используйте когда нужно заменить иконку на другой размер
   по условию `compact` или `regular`.
1. Хук [`useAdaptivityWithJSMediaQueries`](/components/use-adaptivity-with-js-media-queries) – используйте, когда нужно показать или
   скрыть элемент во **всплывающих окнах** (см. [Серверный рендер | Примечание к адаптивности](/overview/ssr#adaptivity-note)).

Подробнее читайте в отдельных документациях по каждой из утилит.