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