Настройка адаптива сводится к изменению свойств (например, размеры) и положения блоков при уменьшении размера экрана, а также их скрытие. Есть несколько общепринятых точек перехода (1024, 768, 640, 480 и пр.), соответствующим ширине экрана разных устройств, но в нашей системе вы не ограничены этими точками и можете выбирать любую точку перехода для переопределения свойств контейнеров и блоков.

Продолжая пример из прошлой главы, начнем сужать окно браузера (мы предпочитаем вызвать панель инструментов разработчика - ctrl-shift-i в Windwows - и сдвигать границу между областью страницы и панелью).

Примерно на 800 пикселях во второй строчке становится тесно. Укажем точку перехода немного больше (вдруг еще один пункт меню добавится), например, 950, и для диапазона “до 950” уберем кнопку отправки сообщения. Для этого в ее настройках оформления добавим точку 950, укажем применение точки перехода для страницы (иначе правило будет применено к ширине блока, что сейчас нам не надо) и для нижнего диапазона ширины укажем “скрывать блок”.

Однако теперь на ширине 950- справа от иконки поиска появился лишний отступ. Это произошло, потому что мы установили для его отступ от кнопки, но кнопки уже нет. Нам стоит либо убрать этот отступ добавить отступ справа у самой кнопки, либо на той же самой ширине экрана 950- убрать этот отступ у иконки поиска.

Уменьшаем окно дальше. На ширине 850 кажется, что вторая строка меню слишком тяжеловесна. Уменьшим высоту строки-контейнера: откроем настройки, добавим точку перехода 850 и для этого значения поменяем высоту списка в настройках компоновки flexbox. А у логотипа на этой ширине экрана уменьшаем ширину блока до 150 пикселей.

Обратите внимание: мы меняем не высоту блока, а высоту списка в компоновке. Это нужно, чтобы элементы внутри строки выстроились по центру по вертикали.

На ширине 550 в нижней строчке снова становится тесно.

Принимаем решение:

Скрыть верхнюю строчку
Скрыть иконку поиска
Скрыть оглавление сайта
Добавить вместо него иконку бургера (скрытый слой), при нажатии на который будем выводить меню и не только)
На свободное место в темной строчке выведем телефон.

Для этого нам нужно:

— В настройках верхней строки-контейнера установить точку перехода (страницы) в 650 (550 плюс небольшой запас на случай добавления нового пункта меню) и на нижнем диапазоне установить скрытие блока.

Для меню и исконки поиска сделать то же.

— Добавить слева или справа от меню блок “Скрытый слой”, настроить его (см. главу про размеры иконок и про настройки этого блока) и установить обратное правило скрытия: показывать на диапазоне до 750 и не показывать выше 750.

— Скопировать из верхней строчки блок с телефонами, вставить его слева от скрытого слоя, настроить диапазон видимости аналогично и настроить отступы справа и слева.

Продолжаем сужать экран. На 400 снова становится тесно: уберем блок с телефонами на диапазоне меньше 400. Адаптация шапки закончена!

Теперь надо настроить скрытый слой.

← Назад 7.4 Процесс сборки сайта 7.6 Скрытый слой Далее →

Наверх