Настроить адаптивные свойства разметки

Адаптивность разметок

Конструктор Web-разметок предоставляет возможность разрабатывать разметки, зависимые от типа пользовательского устройства.

Есть два способа создания адаптивных разметок:

  1. Разметка изначально разрабатывается для конкретного типа устройства с учетом размеров экрана и производительности. Затем настраивается условие выбора разметки, в котором учитывается тип устройства.

  2. Для всех типов устройств разрабатывается общая разметка. При настройке элементов управления используется механизм адаптации, который позволяет устанавливать разные настройки ЭУ для разных устройств.

Второй способ рассмотрен подробнее ниже.

Адаптивные свойства

Для некоторых свойств ЭУ может быть настроена зависимостью от типа клиентского устройства. Например, свойство Видимость может принимать значение TRUE (показывать) при работе на персональном компьютере, но FALSE (скрывать) при работе на смартфоне или планшете. Такие свойства элементов управления называются адаптивными.

В разделе Стандартные элементы управления адаптивные свойства элементов управления отмечены тегом Адаптивный

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

Если настроенная разметка не отображается для устройства, возможно неправильно определяется UserAgent устройства. Администратор может настроить UserAgent вручную.

Элемент управления "Блок"

Элемент управления "Блок" обладает наиболее полным набором адаптивных свойств, которые позволяют:

  • Определять относительную ширину Блока (и его содержимого) для разных типов устройств.

  • Скрывать содержимое Блока на определённых устройствах.

  • Переопределять порядок отображения Блоков внутри родительского Блока.

  • Определять способ выравнивания ЭУ на конкретном типе устройств и др.

Например, варьируя ширину блока относительно родительского блока можно установить значение 100% для мобильных устройств и 60% персонального компьютера.

Пример настройки относительной ширины Блока для разных типов устройств
Рисунок 1. Пример настройки относительной ширины Блока для разных типов устройств

При такой настройке содержимое блока на мобильном устройстве займет всю строку разметки.

Пример размещения пары Блоков с относительной шириной 100% в карточке
Рисунок 2. Пример размещения пары Блоков с относительной шириной 100% в карточке, открытой на телефоне

На персональном компьютере содержимое блока займет часть разметки. При этом следующей блок может быть размещен последовательно с первым, если их суммарная относительная ширина меньше или равна 100%.

Пример размещения пары Блоков в карточке
Рисунок 3. Пример размещения пары Блоков в карточке, открытой на персональном компьютере

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

Стандартная последовательность отображения блоков в карточке
Рисунок 4. Стандартная последовательность отображения блоков в карточке, открытой на персональном компьютере
Измененная последовательность отображения блоков в карточке
Рисунок 5. Изменённая последовательность отображения блоков в карточке, открытой на телефоне