Общие сведения

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

В режимах просмотра и редактирования проекта система автоматически распознает разрешение экрана и отображает проект с соответствующей настройкой отображения.

Диапазон разрешений экрана разделен в системе на пять частей, с которыми условно соотнесены типы устройств:

• смартфон – от 320 до 767 пк;

• планшет – от 768 до 1365 пк;

• ноутбук – от 1366 до 1919 пк;

• монитор – от 1920 до 2559 пк;

• большой монитор – от 2560 до 3840 пк.
  
  

Отображение слоя при различных разрешениях

Плавающая панель переключения отображения

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

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

Отображение для различных типов устройств

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

Рассмотрим слой проекта, на который добавлены два виджета с вертикальной компоновкой.

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

Отображение для различных разрешений экрана устройства

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

Чтобы увидеть, какое разрешение выбрано, зажмите пиктограмму устройства курсором.

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

Настройка компоновки слоев для различных устройств

Панель адаптива

В нижнем правом углу экрана на панели слоев расположена кнопка "Адаптив". При нажатии на кнопку справа появляется всплывающая панель: 

На панели предлагается две опции настройки слоя для разных разрешений экрана:

• Автонастройка. Опция выбрана по умолчанию. При активной опции "Вид по умолчанию" слой будет открываться с учетом автоматической подстройки размера компонентов под экран устройства и его разрешение, как описано выше.

• Ручная настройка. Данный функционал позволяет зафиксировать отображение каждого слоя в уникальной компоновке для определенного устройства (настроенное разрешение).

Создание разрешения для устройства

Для создания уникальной компоновки для устройства нажмите на панели "Адаптив" и выберите устройство, а затем перекомпонуйте объекты на слое, как они должны отображаться при просмотре с устройства данного типа:

Аналогичным способом можно настроить вид для других типов устройств:

Применение настроенных разрешений

 Логика работы настроенных разрешений следующая:

• При просмотре слоя с устройства, для которого настроено разрешение, слой открывается в компоновке этого разрешения.

• При просмотре слоя с устройства, для которого не настроено разрешение, слой переключается в режим "Вид по умолчанию" и отображается в соответствии с автоматически распознанным разрешением экрана устройства. 

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

Замена вида по умолчанию

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

Удаление разрешения

Для удаления настроенного разрешения необходимо нажать на всплывающую кнопку на разрешении, выбрать "Удалить" и подтвердить удаление. Отображение слоя переключится в режим "Вид по умолчанию".