Как адаптировать страницу в нулевом блоке

В этой статье мы расскажем, как и зачем адаптировать страницу, созданную в универсальном блоке.

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

Основная информация

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

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

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

Сначала мы создаём дизайн для большой версии экрана (компьютер)

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

Вот несколько примеров того, как должна выглядеть страница для каждого размера:

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