Использование медиа-запросов

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

CSS-правило @media позволяет применять CSS-стили в зависимости от общего типа устройства или других характеристик, таких как разрешение экрана или ширина области просмотра браузера.

Помимо той же функциональности, что и свойства Точки остановы, CSS медиа-запросы позволяют изменять стили компонентов не только на основе ширины области просмотра, но и на основе таргета:

  • Тип носителя (all, print, screen)

  • Фактическое значение разрешения экрана

  • Режим отображения

  • Ориентация устройства

  • Характеристики устройства ввода

  • Технические характеристики экрана

  • Настройки обработки цвета агента пользователя

  • Предпочтения операционной системы

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

Это помогает избежать создания дополнительных точек остановы для единичных случаев, сохраняя список ключевых точек остановы, по которому легко ориентироваться.

Правило @media состоит из необязательного типа носителя и любого количества выражений характеристик, которые можно комбинировать с помощью логических операторов. В самом общем виде синтаксис правила выглядит следующим образом:

@media тип носителя(характеристика: значение) {
  селектор {
    свойсво: значение;
  }
}

Несколько @media правил можно объединить в одно правило с помощью запятых ( , ) или вложить друг в друга, используя обычный синтаксис CSS-вложенности с фигурными скобками ( {} ).

Для таргетинга медиа-запросов, существует множество специальных функций. Вот краткий обзор поддерживаемых опций:

any-hover, any-pointer, hover, pointer

Проверка доступных методов ввода на устройстве.

aspect-ratio, height, width

Проверка метрик размера области просмотра.

Наиболее используемыми из всех доступных функций являются width и ее префиксные версии(min-width и max-width), так как на их основе создается правило для применения адаптивных стилей в зависимости от ширины области просмотра.

color, color-gamut, color-index, dynamic-range, forced-colors, inverted-colors, monochrome, video-dynamic-range

Проверка определенных настроек агента пользователя и/или экрана самого устройства, связанных с обработкой цвета.

display-mode, orientation

Проверка состояния экрана.

grid, resolution, update

Проверка технических характеристик экрана.

overflow-block, overflow-inline

Проверка настроек прокрутки содержимого.

prefers-color-scheme, prefers-contrast, prefers-reduced-motion

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

Чтобы объединить тип медиа и одну или несколько медиа-функций в медиа-запросе, можно использовать логические операторы not, and, only, и or.

Так, правило, определяющее ширину области просмотра браузера, может выглядеть следующим образом:

@media screen and (max-width: 800px) {
  селектор{
    свойство: значение;
  }
}

Такое правило срабатывает только на устройствах с экраном и применяет стили к соответствующим элементам, если ширина области просмотра составляет 800 пикселей или меньше.

Медиа-запрос принимает значение true, если указанный тип носителя (если он присутствует) соответствует устройству, на котором отображается инструментальная панель, и все выражения медиа-функций в правиле возвращают true.

Добавление медиа-запроса к стилю компонента

Чтобы применить правило медиа-запроса к компоненту инструментальной веб-панели, просто пропишите его в соответствующем свойстве пользовательского CSS-стиля компонента.

  1. В UI Builder добавьте компонент на инструментальную панель, нажав на него в Палитре компонентов или перетащив его на макет.

  2. Откройте Редактор свойств, наведя курсор на компонент на макете и нажав кнопку Настроить () в правом верхнем углу появившегося оверлея, или выбрав его в Дереве компонентов.

  3. В Редакторе свойств переключитесь на вкладку, содержащую свойство пользовательского стиля.

  1. На открывшейся вкладке добавьте базовые CSS-стили в локальное пользовательское CSS-поле, чтобы было с чем работать в дальнейшем:

font-size: 40px;
font-weight: 900;
color: hotpink;
transition: 0.24s;

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

  1. В том же свойстве добавьте медиа-запрос, нацеленный на определенную ширину области просмотра, и добавьте стили, которые будут применяться, если определенное условие будет true. Установите ширину меньше размера вашего экрана, чтобы в конце вы могли протестировать полученные изменения:

@media screen and (max-width: 900px) {
  font-size: 20px;
  padding: 40px 80px;
  background-color: indigo;
}

Как и в случае с использованием простых CSS-свойств в пользовательских стилях компонентов в SberMobile UI Builder, использование медиа-запросов не требует CSS-селектора внутри правила для самых простых сценариев благодаря возможностям CSS Editor.

  1. Основной стиль вне правила @media применяется, когда поле выходит из фокуса, и вы можете увидеть его на панели инструментов в UI Builder.

  1. Чтобы проверить в действии добавленный медиа-запрос, откройте инструментальную панель в отдельном режиме предпросмотра, нажав кнопку Запустить () в правой части шапки пользовательского интерфейса.

  2. Изменяйте размер окна браузера, содержащего открытую вкладку, пока его ширина не достигнет значения, определенного в правиле @media. В тот момент, когда это произойдет, будут применены адаптивные стили, и изменения будут видны на панели управления. Измените размер окна больше указанного значения ширины еще раз, чтобы увидеть, как изменятся стили.

Как и везде в CSS, если свойство стиля, добавленное к элементу без каких-либо условий, не переопределено в медиа-запросе, оно продолжает применяться, когда правило @media возвращает true и применяет его содержимое к элементу .