Как сделать адаптивную верстку страницы в Wappler скачать в хорошем качестве

Как сделать адаптивную верстку страницы в Wappler

Можно задать разный размер колонок для устройств с разной шириной экрана. В верхней части интерфейса есть иконки переключения между разными устройствами. При их нажатии меняется ширина рабочей области макета. Каждому устройству соответствует определенная ширина и определенный код: xs, sm, md, lg, xl. Например, если выбрано устройство md (планшет), то если установить размер элемента 6, то ему будет задан не класс col-6, а col-md-6. Это значит, что на устройстве с кодом md (планшет) и выше (lg, xl) будет применяться размер 6. В нашем случае для левой колонки с фотографией и ссылками нужно задать ширину 12 для мобильных устройств и 2 — для планшетов и больше. Этому соответствуют классы col-12 col-md-2. При этом, левая колонка с фотографией и ссылками на мобильных будет делиться на 2 равные части (колонки) по ширине — слева фото, а справа — ссылки. Поэтому для каждой из этих двух колонок будет указано col-6 col-md-12. Аналогично, если вы настраиваете стили через панель дизайна, и при этом у вас выбрано конкретное устройство, то эти стили будут работать только от данной ширины экрана и выше. Это обеспечивается через медиазапросы (media queries). Официальный сайт Wappler. https://wappler.io/ Чем Wappler отличается от других ноукод-инструментов для веб-разработки: https://vc.ru/services/247542-wappler... Telegram-чат «Wappler Rus Community». https://t.me/wappler_rus_community