войти

Дизайнерам и разработчикам

База знаний

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

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

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

Форма добавления товара
Примерно на 800 пикселях во второй строчке становится тесно. Укажем точку перехода немного больше (вдруг еще один пункт меню добавится), например, 950, и для диапазона “до 950” уберем кнопку отправки сообщения. Для этого в ее настройках оформления добавим точку 950, укажем применение точки перехода для страницы (иначе правило будет применено к ширине блока, что сейчас нам не надо) и для нижнего диапазона ширины укажем “скрывать блок”.
Скрываем блок
Однако теперь на ширине 950- справа от иконки поиска появился лишний отступ. Это произошло, потому что мы установили для его отступ от кнопки, но кнопки уже нет. Нам стоит либо убрать этот отступ  добавить отступ справа у самой кнопки, либо на той же самой ширине экрана 950- убрать этот отступ у иконки поиска. 
Лишний отступ
Устанавливаем точку 950, ниже убираем правый отступ
Теперь все в порядке
Уменьшаем окно дальше. На ширине 850 кажется, что вторая строка меню слишком тяжеловесна. Уменьшим высоту строки-контейнера: откроем настройки, добавим точку перехода 850 и для этого значения поменяем высоту списка в настройках компоновки flexbox. А у логотипа на этой ширине экрана уменьшаем ширину блока до 150 пикселей.
Надо облегчить вторую строку
Меняем высоту списка компоновки для 850-
Уменьшаем ширину логотипа для 850-
Шапка выглядит хорошо

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

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

Тесто в шапке

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

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

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

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

Скрываем контейнер/блок на 650-
Для меню и исконки поиска сделать то же.
Добавить слева или справа от меню блок “Скрытый слой”, настроить его (см. главу про размеры иконок и про настройки этого блока) и установить обратное правило скрытия: показывать на диапазоне до 750 и не показывать выше 750.
Добавляем скрытый слой
Скрываем на 650+
Показываем на 650-
Скопировать из верхней строчки блок с телефонами, вставить его слева от скрытого слоя, настроить диапазон видимости аналогично и настроить отступы справа и слева.
Блок телефонов на 650-
Продолжаем сужать экран. На 400 снова становится тесно: уберем блок с телефонами на диапазоне меньше 400. Адаптация шапки закончена!
Убираем блок телефонов на 400-

© 1999 – 2024
ООО «НетКэт»

+7 (495) 783-60-21
+7 (495) 055-73-84

info@netcat.ru

129329, г. Москва,
ул. Вересковая, 13