Адаптация под разные устройства
Для того, чтобы сайт был удобным для пользователя при просмотре на любом устройстве, нужно адаптировать его к разным разрешениям экрана. Это достигается путем установки элементам разных стилей (например, расположения на холсте или размеров) для разных разрешений экрана.
Опция Breakpoints позволяет установить размеры экрана (режимы отображения), при которых будут меняться стили элементов. Эта опция располагается на Верхней панели.
Доступны следующие Breakpoints:
- Компьютер — базовый breakpoint (Desktop - base breakpoint)
- Планшет — 991px и меньше (Tablet - 991px and down)
- Мобильный телефон в горизонтальном режиме — 767px и меньше (Mobile Landscape — 767px and down)
- Мобильный телефон в портретном режиме — 479px и меньше (Mobile Portrait — 479px and down)
Можно также добавить дополнительные Breakpoints:
- 1280px и больше (1280px and up)
- 1440px и больше (1440px and up)
- 1920px и больше (1920px and up)
Вы можете переключиться на нужный размер экрана через список в опции Breakpoints, либо на верхней части Холста. Наведите курсор мыши на верхнюю панель Холста и выберите нужный режим, передвигая курсор по панели, а затем кликнув на выбранную опцию. Для удобства разные режимы подсвечиваются разными цветами.
Стили в разных режимах отображения передаются в двух направлениях:
- от базового режима (Компьютер) вниз к меньшим размерам экрана (мобильным устройствам)
- от базового режима (Компьютер) вверх к большим размерам экрана (1280px, 1440px и 1920px)
Это означает, что:
- Стили, установленные элементам для базового режима отображения (Компьютер) по умолчанию действуют и для всех других режимов.
- При изменении стилей для режима Планшет — также меняются стили для меньших по размеру экранов (мобильных телефонов). При этом эти изменения не передаются на режим Компьютер.
- При изменении стилей для режима 1280px — также меняются стили для больших по размеру экранов (1440px и 1920px). При этом эти изменения не передаются на режим Компьютер.
- Стили передаются на другие режимы отображения до тех пор, пока они не будут для них переопределены. Можно переопределить унаследованные стили на любом режиме отображения.
Для установки стилей:
- Переключитесь на нужный режим отображения (Tablet, Mobile Landscape, Mobile Portrait или один из дополнительных режимов).
- Установите элементам стили для выбранного режима отображения в соответствующих разделах вкладки Стилей (Styles) — это можно сделать как на панели Дизайн (для уникальных стилей элемента), так и с помощью редактирования пользовательского класса.
Подробнее про работу с уникальными стилями и пользовательскими классами прочитайте в Статье.
Измененные стили отображаются на вкладке Стили цветом, соответстветствующим режиму отображения, к которому они применяются:
Вы можете изменить стили для всех режимов отображения или выборочно.
Пример стилизации для разных режимов отображения:
