Як адаптувати сторінку в Zero block

У цій статті ми розповімо, як і навіщо адаптувати сторінку, створену в універсальному блоці.

Якщо створена сторінка в універсальному блоці добре виглядає на комп’ютері, але сайт не відображатиметься коректно на екрані мобільного телефона або планшета через різний розмір цих пристроїв.

Ключова інформація

В універсальному блоці потрібно налаштувати адаптацію для планшета й телефона в горизонтальному та вертикальному положеннях.

Для комп’ютера розмір блоку становить 1200px.
Планшет у горизонтальному положенні — 960px
Планшет у вертикальному положенні — 640px
Телефон у горизонтальному положенні — 480px
Телефон у вертикальному положенні — 320px

У блоці для цього є інструмент, який після перемикання автоматично показує розмір сторінки, у межах якого мають уміщуватися всі створені елементи сайту: текст, фігури, кнопки, відео тощо.

Спочатку ми створюємо дизайн для великої версії екрана (комп’ютера)

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

Ось кілька прикладів того, як сторінка має виглядати для кожного розміру:

Планшет у горизонтальному положенні 960px