Адаптивность

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

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

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

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

Параметры адаптивности

Для адаптивности мы используем несколько подходов.

Подход	Реализация в коде
↓ Изменение размеров интерфейса	`sizeX` и `sizeY`
↓ Изменение вёрстки	`viewWidth` и `viewHeight`
↓ Изменение поведения	`hasPointer`

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

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

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

Для реализации этого подхода в библиотеке созданы два свойства sizeX и sizeY, каждый из которых принимает compact или regular. В CSS они реализованы через @media ↗, в JS через matchMedia() ↗.

`sizeX`

Ориентирован на изменение ширины экрана.

Значение	Условие
`compact`	`ширина >= 768px`
`regular`	`ширина < 768px`

`sizeY`

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

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

Размеры экрана

От размера экрана может полностью меняться вёрстка компонента, чтобы обеспечить для пользователя привычный для него интерфейс. Например, ModalPage на мобильном экране будет выезжающей снизу верх панелью, а на настольном – диалоговым окном по центру экрана.

Под определение размеров экрана есть два свойства viewWidth и viewHeight, значения которых являются брейкпоинтами. В CSS они реализованы через @media ↗, в JS через matchMedia() ↗.

`viewWidth`

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

`viewHeight`

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

Наличие точного указателя

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

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

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

Хук useAdaptivityConditionalRender – используйте, когда нужно показать или скрыть элемент интерфейса по брейкпоинту.
Компонент AdaptiveIconRenderer – используйте когда нужно заменить иконку на другой размер по условию compact или regular.
Хук useAdaptivityWithJSMediaQueries – используйте, когда нужно показать или скрыть элемент во всплывающих окнах (см. Серверный рендер | Примечание к адаптивности).

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

Навигация

Серверный рендеринг