- Справочный центр
- Дизайн и правки
- Адаптивные варианты и варианты под устройства
Адаптивные варианты и варианты под устройства
Создайте мобильную и десктопную версии экрана и держите их в согласии.
Обновлено:
На этой странице
Создание варианта
Попросите об этом или используйте переключатель устройства на экране:
Сделай мобильную версию лендинга.
Вариант — это новый экран на холсте, приспособленный к целевой ширине, а не плавное изменение размера. Раскладка действительно перестраивается: многоколоночные блоки складываются в столбик, навигация сворачивается, типографика уменьшается.
Стоимость
Перевод экрана на другой размер устройства тарифицируется за экран по той же ставке, что и перегенерация, — потому что это она и есть. Перевести восемь экранов стоит в восемь раз дороже, так что сначала стоит проверить баланс.
Как держать варианты в согласии
Варианты — отдельные экраны, поэтому более поздняя правка десктопной версии не переезжает в мобильную сама. Два варианта:
- Попросить изменение для обеих явно: «И на десктопном, и на мобильном лендинге поменяй кнопку на „Начать бесплатно“».
- Либо сначала закончить десктопный макет, а варианты сгенерировать один раз в конце. Обычно это более дешёвый порядок работы.
Тема общая
Оба варианта используют тему проекта, поэтому изменения цвета и шрифта применяются к ним автоматически. Своей у каждого варианта остаётся только раскладка.
Экспортированный код
Экспортированный код отражает тот экран, который вы экспортировали. Если вам нужна одна по-настоящему адаптивная реализация, а не две фиксированные раскладки, экспортируйте десктопный экран и адаптируйте его либо экспортируйте оба и сведите их на брейкпоинте — см. Экспорт кода.
Была ли статья полезной?
Похожие статьи
Редактирование экрана
Три способа изменить макет — чат, режим редактирования и тема — и когда каждый из них уместен.
Темы и гайдлайны
Как устроена тема проекта, как менять её безопасно и почему цвета нельзя править по экранам.
Экспорт кода (HTML, React, Tailwind)
Выгрузите один экран или весь проект как готовый к продакшену фронтенд-код.