Брейкпоинты

Брейкпоинты = фреймы

Адаптив в Verstka не задаётся отдельным списком «брейкпоинтов». Каждый брейкпоинт — это фрейм на холсте, у которого в свойствах выбрана роль Breakpoint. Обычный фрейм с ролью Frame в выбор макета по ширине экрана не входит.

Зачем это нужно

Несколько фреймов-брейкпоинтов — это несколько версий статьи под разную ширину области просмотра (например, мобильная и десктопная). В редакторе вы видите их рядом и правите каждую версию отдельно. На сайте у читателя в один момент показывается та версия, чей диапазон ширины совпадает с текущей шириной контейнера статьи.

Роль фрейма

В панели свойств выбранного фрейма:

• Frame — обычный фрейм: контейнер внутри макета, не участвует в переключении по ширине viewport.
• Breakpoint — этот фрейм считается вариантом статьи для адаптива: он попадает в набор «брейкпоинтных» фреймов и участвует в выборе активной версии по ширине.

Ширина фрейма на холсте (его «дизайнная» ширина) задаёт точку отсчёта для масштаба и для расчёта границ, если вы их не задаёте вручную.

Диапазоны ширины

Для каждого брейкпоинт-фрейма задаётся, при какой ширине области статьи должна выбираться именно эта версия:

• Поля min / max scale width (границы масштабирования) задают интервал ширины, в котором активен этот фрейм. У соседних по ширине брейкпоинтов границы должны стыковаться (верхняя граница одного совпадает с нижней следующего), чтобы не было разрывов и дублей.
• Если границы не заданы, система использует середину между ширинами соседних фреймов как разделитель между диапазонами.

В редакторе границы можно настраивать на визуальной шкале (перетаскивание разделителей между сегментами брейкпоинтов) в свойствах брейкпоинт-фрейма.

Масштаб (Scalable)

У брейкпоинт-фрейма доступна опция Scalable:

• Включено — макет внутри этого фрейма масштабируется относительно ширины области просмотра в пределах min/max (коэффициент считается как отношение эффективной ширины к ширине фрейма). Так можно «растягивать» одну версию между жёсткими границами.
• Выключено — масштаб 1:1, переключение идёт только за счёт выбора другого брейкпоинт-фрейма при смене ширины.

Итог: настройте несколько фреймов с ролью Breakpoint, при необходимости уточните диапазоны ширины и Scalable — это и есть модель брейкпоинтов в проекте.