Настройка адаптива

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

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

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

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

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

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

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

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