Якщо створена сторінка в універсальному блоці добре виглядає на комп'ютері, але сайт буде неправильно відображатися на екрані мобільного телефону або планшета, оскільки розміри цих пристроїв різні.
Ключова інформація
В універсальному блоці потрібно налаштувати адаптацію для планшета та телефону в горизонтальному та вертикальному положеннях.
- Для комп'ютера розмір блоку становить 1200px.
- Планшет у горизонтальному положенні — 960px
- Планшет у вертикальному положенні — 640px
- Телефон у горизонтальному положенні — 480px
- Телефон у вертикальному положенні — 320px
Для цього в блоці є інструмент, який при перемиканні автоматично показує розмір сторінки, в який мають вміститися всі створені елементи сайту: текст, фігури, кнопки, відео тощо.
Спочатку ми створюємо дизайн для великої версії екрана (комп'ютер)
Після цього починаємо адаптувати створену сторінку спочатку для планшета в горизонтальному положенні, і так далі. Для цього використовуємо панель інструментів у блоці, регулюючи розміри текстів та елементів так, щоб вони не виходили за межі блоку, інакше вони не будуть видимі на пристроях користувачів сайту.
Ось кілька прикладів того, як сторінка має виглядати для кожного розміру:
Планшет у горизонтальному положенні 960px
Планшет у вертикальному положенні 640px
Телефон у горизонтальному положенні 480px
Телефон у вертикальному положенні 320px
Усі базові блоки в конструкторі сайтів автоматично адаптуються до потрібного розміру екрана. Про базові блоки читайте в наступних статтях.