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

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

Брейкпоинты (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 или один из дополнительных режимов).

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

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

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

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

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