Адаптивные стили

Если проект предполагает работу на различных устройствах на разных платформах, вам нужно быть уверенным, что ваши инструментальные панели будут удобны в использовании и хорошо выглядеть на любом устройстве из предполагаемого парка поддержки. Текущий подход подразумевает использование адаптивного дизайна для создания пользовательского интерфейса.

Адаптивный веб-дизайн - это подход в веб-дизайне, позволяющий сделать веб-страницы хорошо отображаемыми на экранах любого размера и разрешения, обеспечивая при этом хорошее удобство использования.

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

Адаптивное поведение пользовательского интерфейса лучше планировать заранее, а затем добавлять его в инструментальные панели приложений, используя доступные свойства компонентов и методы CSS. В противном случае вы рискуете столкнуться с необходимостью кардинально перестраивать всю разметку инструментальной панели, чтобы реализовать желаемое поведение.

Существует два способа добавить адаптивное поведение в инструментальную панель или ее компоненты в SberMobile:

• Использование свойства Точки останова компонентов.

• Применение CSS-правил @media непосредственно из свойств пользовательского стиля компонентов.

Первый метод предполагает ведение списка точек останова для ключевых разрешений, в которых происходит наибольшее количество изменений в макете и стилях. Подробнее о его использовании читайте в статье Использование точек останова разрешения.

Вторым является классический CSS-подход к адаптивному дизайну. Он полезен при применении локальных изменений стиля к компоненту, который требует корректировки на определенном разрешении экрана из общего списка добавленных Точек останова. Читайте об его использовании в статье Использование медиазапросов.