Адаптивные стили![](anchor.svg)
Если проект предполагает работу на различных устройствах на разных платформах, вам нужно быть уверенным, что ваши инструментальные панели будут удобны в использовании и хорошо выглядеть на любом устройстве из предполагаемого парка поддержки. Текущий подход подразумевает использование адаптивного дизайна для создания пользовательского интерфейса.
![]() | Адаптивный веб-дизайн - это подход в веб-дизайне, позволяющий сделать веб-страницы хорошо отображаемыми на экранах любого размера и разрешения, обеспечивая при этом хорошее удобство использования. |
В число возможных реализаций входит изменение макета инструментальной панели, размеров шрифтов и стилей компонентов, а также удаление или замена некоторых элементов в зависимости от ширины области просмотра.
![]() | Адаптивное поведение пользовательского интерфейса лучше планировать заранее, а затем добавлять его в инструментальные панели приложений, используя доступные свойства компонентов и методы CSS. В противном случае вы рискуете столкнуться с необходимостью кардинально перестраивать всю разметку инструментальной панели, чтобы реализовать желаемое поведение. |
Способы включения адаптивного пользовательского интерфейса![](anchor.svg)
Существует два способа добавить адаптивное поведение в инструментальную панель или ее компоненты в SberMobile:
Использование свойства Точки останова компонентов.
Применение CSS-правил
@media
непосредственно из свойств пользовательского стиля компонентов.
Первый метод предполагает ведение списка точек останова для ключевых разрешений, в которых происходит наибольшее количество изменений в макете и стилях. Подробнее о его использовании читайте в статье Использование точек останова разрешения.
Вторым является классический CSS-подход к адаптивному дизайну. Он полезен при применении локальных изменений стиля к компоненту, который требует корректировки на определенном разрешении экрана из общего списка добавленных Точек останова. Читайте об его использовании в статье Использование медиазапросов.