Вёрстка по макету из олимпиады. Часть 7
В этом интерактивном курсе мы разбираем вёрстку макета из студенческой олимпиады по фронтенду от HTML Academy и Яндекса. Участникам нужно было сверстать сайт по графическому макету с учётом адаптивности и переполнения.
Это седьмая часть курса. В ней мы добавим версии промоблока для планшета и мобильных устройств. Вот графический макет компонента.
В шестой части мы завершили вёрстку десктопной версии. Продолжаем с этого состояния.
Мы вынесли фоновые изображения разных версий компонента в отдельный шаг, посмотрите на них. У них разные пропорции и кадрирование. Значит, на разных версиях компонента придётся использовать разные изображения.
Чтобы решить эту задачу, мы используем тег picture с вложенными тегами source для разных версий. С помощью атрибута srcset для каждой картинки будем указывать два варианта отображения — обычный и с повышенной плотностью пикселей.
Начнём с десктопной версии картинки. Это версия по умолчанию, поэтому для неё нужно указать только вариант с повышенной плотностью пикселей.
Добавим тегу <img> атрибут srcset, который позволит указать несколько вариантов одного и того же изображения. С его помощью мы добавим картинку с разрешением 2x для экранов высокой плотности. Браузер сам выберет наиболее подходящее изображение в зависимости от условий отображения.
Чтобы отобразить другое изображение на планшетной версии сайта, добавим тег <picture>, который служит обёрткой для тега <img>.
Настройки для адаптивных изображений хранятся в атрибутах тега <source> внутри тега <picture>. Для начала создадим пустой <source>.
Разберём настройки тега <source> для планшетной версии. Главный атрибут — это media. Он описывает условия, при которых браузеру нужно использовать другие картинки.
В нашем случае у media задано значение (max-width: 1439px). То есть изображение, которое мы укажем далее, должно использоваться при ширине вьюпорта меньше или равной 1439 пикселей (то есть на ширине вьюпорта планшетной версии).
Атрибут srcset содержит пути к картинкам, которые надо использовать, если условие в атрибуте media выполняется. В srcset у тега <source> включают оба варианта изображений — с обычной плотностью пикселей и с повышенной.
Атрибут type="image/jpg" означает, что тип изображения — JPG. Это вспомогательный атрибут.
Если не сработает условие из <source>, то используется изображение, указанное в теге <img>.
По аналогии с планшетной версией, добавим тег <source> с картинками для мобильных устройств. В атрибуте media укажем 767 пикселей или меньше (это ширина версии для мобильных устройств). Предусмотрим два варианта изображений — с обычной плотностью пикселей и с повышенной.
Чтобы увидеть как меняются изображения, поэкспериментируйте с масштабом и шириной мини-браузера.
Перейдём к стилям.
После того, как мы поменяли разметку, добавив тег <picture>, у картинки появилась обёртка. Можно подстраховаться и добавить для тега <picture> правило, в котором использовать значение contents для CSS-свойства display. Так этот элемент не будет влиять на оформление и структуру страницы.
Обычно, display: contents устанавливают и для тега <source>.
Чтобы определить стили для планшета, добавим медиа-запрос для экранов с шириной меньше 1439 пикселей. Это значение мы получили из макета.
Для удобства сравнения версий включите в мини-браузере масштаб — 0.5.
Внутри медиа-запроса добавим стили для элемента .hero. В стилях переопределим минимальную высоту блока — 580 пикселей.
Контент внутри .hero в версии для планшета выравнивается по центру по вертикали и по горизонтали. Сделаем .hero флекс-контейнером и добавим выравнивание по главной и поперечной оси.
Элементы внутри .hero__wrapper выровнены по центру по горизонтали. Чтобы этого добиться, превратим .hero__wrapper в флекс-контейнер. Повернём главную ось флекс-контейнера на 90 градусов. Установим выравнивание вдоль поперечной оси. Переопределим максимальную ширину для контейнера. Также изменим внутренние отступы. Поскольку текстовый блок должен быть по центру и по горизонтали и по вертикали, отступы лучше подобрать с учётом поведения блока при добавлении контента. По макету — это 60 пикселей сверху/снизу и 75 пикселей по бокам.
В версии для планшета у заголовка .hero__title меняются параметры шрифта и добавляется выравнивание текста по центру. Создадим новое правило и установим нужные параметры для CSS-свойств.
Добавим выравнивание текста по центру для элемента .hero__text.
В версии для планшета меняется отступ для кнопки. Добавим ещё одно правило внутри медиа-запроса для планшетной версии и переопределим внешний отступ для .hero__link.
Перейдём к версии для мобильных устройств.
Добавим ещё один медиа-запрос для экранов с шириной до 767 пикселей. Значение мы получили из макета.
Для удобства сравнения версий включите в мини-браузере масштаб — 1.
Внутри этого медиа-запроса снова переопределим минимальную высоту для .hero. Для мобилок она равна 400 пикселей.
Для мобильных устройств меняются параметры для элемента .hero__wrapper. Меняется ограничение по ширине. Снова меняются поля.
У заголовка меняются параметры шрифта. Добавим правило для .hero__title и укажем нужные значения.
Меняются параметры шрифта и ограничение по ширине для текста в блоке. Добавим правило для .hero__text. Переопределим максимальную ширину, она будет подстраиваться под размеры родительского блока. Укажем новые значения для размера шрифта и высоты строки.
В медиа-запросе для мобильных устройств переопределим поля для кнопки .button.
На финальном шаге проверим переполнение для планшетной и мобильной версии. Изменим текст, как предлагается на макете.
Установите ширину окна минибраузера сначала под ширину планшетной версии, затем под ширину мобильной и убедитесь, что всё работает.
Адаптивная вёрстка промоблока готова.
