Адаптивность

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

Брейкпоинты

Framix использует систему брейкпоинтов — точек переключения между разными версиями сайта:

Каждый брейкпоинт хранит свою версию страницы — свои секции и расположение блоков.

Как переключаться между устройствами

На верхней панели конструктора есть переключатель устройств. Кликните на нужную иконку:

• Монитор — десктопная версия
• Планшет — планшетная версия
• Телефон — мобильная версия

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

Как работает адаптивность

Каждый брейкпоинт — это отдельная версия страницы. Это значит:

• У каждого брейкпоинта свои секции с отдельным расположением блоков
• Вы можете полностью перестроить страницу для мобильной версии
• Изменения в одном брейкпоинте не влияют на другие

Порядок работы

Рекомендуем начинать с десктопной версии:

1. Сначала десктоп — создайте страницу для большого экрана
2. Затем планшет — переключитесь и адаптируйте расположение блоков
3. В конце мобильный — настройте версию для телефона

Советы по адаптивности

• Мобильная версия важна — больше половины пользователей заходят с телефона. Не игнорируйте её
• Упрощайте на мобильном — на маленьком экране лучше показать меньше элементов, но крупнее
• Проверяйте текст — убедитесь, что текст читаем на всех устройствах
• Используйте проценты — для ширины блоков используйте % вместо px, чтобы они подстраивались под ширину экрана
• Проверяйте в предпросмотре — обязательно просмотрите каждую версию перед публикацией