Адаптация под разные устройства

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

Брейкпоинты (Breakpoints)

Опция Breakpoints позволяет установить размеры экрана (режимы отображения), при которых будут меняться стили элементов. Эта опция располагается на Верхней панели.

Доступны следующие брейкпоинты:

Компьютер — базовый breakpoint (Desktop — base breakpoint)

Планшет — 991px и меньше (Tablet — 991px and down)

Мобильный телефон в горизонтальном режиме — 767px и меньше (Mobile Landscape — 767px and down)

Мобильный телефон в портретном режиме — 479px и меньше (Mobile Portrait — 479px and down)

Можно также добавить дополнительные брейкпоинты:

1280px и больше (1280px and up)

1440px и больше (1440px and up)

1920px и больше (1920px and up)

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

Стили в разных режимах отображения

Особенности изменения стилей в разных режимах отображения

Стили в разных режимах отображения передаются в двух направлениях:

от базового режима (Компьютер) вниз к меньшим размерам экрана (мобильным устройствам)

от базового режима (Компьютер) вверх к большим размерам экрана (1280px, 1440px и 1920px)

Это означает, что:

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

При изменении стилей для режима Планшет — также меняются стили для меньших по размеру экранов (мобильных телефонов). При этом эти изменения не передаются на режим Компьютер.

При изменении стилей для режима 1280px — также меняются стили для больших по размеру экранов (1440px и 1920px). При этом эти изменения не передаются на режим Компьютер.

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

Установка стилей в разных режимах отображения

Для установки стилей:

Переключитесь на нужный режим отображения (Tablet, Mobile Landscape, Mobile Portrait или один из дополнительных режимов).

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

Подробнее про работу с уникальными стилями и пользовательскими классами —

Измененные стили отображаются на вкладке Дизайн цветом, соответствующим режиму отображения, к которому они применяются:

Вы можете изменить стили для всех режимов отображения или выборочно.

Пример стилизации для разных режимов отображения: