Вёрстка по макету из олимпиады. Часть 4
Это четвёртая часть курса про вёрстку макета из студенческой олимпиады по фронтенду от HTML Academy и Яндекса. В ней мы добавим версии шапки для планшета и мобильных устройств. Вот графический макет компонента.
В третьей части мы добавили стили состояний интерактивных элементов. Продолжим с этого состояния.
Чтобы добавить версии для планшета и мобильных устройств, сделаем нашу вёрстку адаптивной.
Адаптивная вёрстка или дизайн — создание страниц сайта, которые автоматически подстраиваются под размер, разрешение и ориентацию экрана устройства.
Для начала в разметке в <head> укажем метатег viewport. Он подскажет браузеру, как отображать и масштабировать страницу на разных устройствах. Значение width=device-width устанавливает ширину области просмотра равной ширине экрана устройства. initial-scale=1 задаёт начальный масштаб 100%.
Для создания адаптива мы используем подход desktop first. То есть будем двигаться от десктопной версии к планшетной и мобильной: код десктопной версии оставляем как есть, а код остальных версий будем добавлять внутри медиазапросов с max-width.
Медиазапрос @media (max-width: 1439px) сработает, когда ширина вьюпорта меньше 1439px. Медиазапрос будет отвечать за версию для планшета. Размер вьюпорта выбираем, опираясь на размеры компонентов в графическом макете.
В медиазапрос @media (max-width: 1439px) добавим правило для .header и укажем минимальную ширину 768 пикселей. Это минимальная ширина шапки в версии для планшета.
Чтобы видеть изменения для планшетной версии, уменьшите ширину мини-браузера вручную или переключите ширину 1000px в настройках вместо 100%.
В версии для планшета у контейнера .header__wrap изменяется ширина и количество колонок.
Изменим ширину для .header__wrap — установим её равной 618 пикселям. Значение 618 мы получили из макета.
Переопределим грид-шаблон для .header__wrap так, чтобы получилось две колонки по 309 пикселей каждая.
Уменьшите ширину окна минибраузера и проверьте, что количество колонок меняется.
Также на планшете меняется вертикальное выравнивание элементов грида. Они начинают выравниваться по нижнему краю. Переопределим align-items.
В версии для планшета нет главной навигации. Спрячем .header__list с помощью display: none.
Уменьшите ширину окна минибраузера и проверьте, что главная навигация исчезает.
У ссылки с номером телефона в планшетной версии меняются параметры шрифта. Добавим правило для .header__phone и переопределим параметры шрифта.
С версией для планшета закончили. На следующем шаге перейдём к версии для мобильных устройств.
Медиазапрос @media (max-width: 767px) сработает, когда ширина вьюпорта меньше 767px. Медиазапрос будет отвечать за мобильную версию.
В медиазапрос для мобилок добавим правило для .header и укажем минимальную ширину 375 пикселей. Значение мы получили из макета.
В мобильной версии переопределяем поля у шапки — по 15 пикселей со всех сторон.
Меняем ширину .header__wrap на 345px.
Меняем в грид-шаблоне для .header__wrap ширину колонок — 114 пикселей для первой, 215 пикселей для второй.
Также на мобильной версии появляется отступ между колонками. По макету он равен 16 пикселей. Добавим его.
На мобильной версии логотип меняет свои размеры. Сначала поменяем размеры контейнера логотипа — .header__logo-link.
Также эти размеры применим к изображению внутри ссылки.
Уменьшите ширину окна минибраузера и проверьте, что логотип меняет размеры.
В мобильной версии снова меняются параметры шрифта для номера телефона. Переопределим параметры шрифта для .header__phone.
На финальном шаге поменяйте ширину окна минибраузера сначала под ширину планшетной версии, затем под ширину мобильной и проверьте, что всё работает.
Адаптивная вёрстка шапки готова.
