Знакомство с адаптивностью
В этом курсе вы научитесь создавать адаптивные веб-сайты. Но сначала давайте разберёмся, как работают «обычные» веб-интерфейсы.
Возьмём для примера промо-сайт тяжёлого орбитального тягача, который состоит из шапки и двух колонок. Самый популярный подход к созданию таких сайтов — это использование фиксированной сетки (или «фикс») с центровкой.
«Фикс» с центровкой ведёт себя, как показано на анимации выше.
Верхнеуровневые контейнеры (шапка и контейнер для колонок) имеют фиксированную ширину и автоматически выровнены по горизонтали. На широких экранах такое решение демонстрирует отличные результаты.
Однако на узких экранах фикс с центровкой вызывает некоторые проблемы. Элементы не помещаются на экране, и появляется нежелательная горизонтальная полоса прокрутки.
Кроме того, при прокрутке страницы по горизонтали часто можно заметить «обрезанный» фон.
Чтобы решить проблему узких экранов, иногда используют «резиновую» вёрстку или просто «резину».
Суть этого подхода в том, чтобы заменить фиксированные ширины колонок на относительные, что позволит элементам подстроиться под ширину экрана пользователя.
Мы вынесли все стили сетки в редактор и сейчас попробуем превратить фиксированную вёрстку в резиновую.
Размеры элементов header и main заданы с помощью CSS-свойства max-width, поэтому при уменьшении ширины окна браузера эти блоки будут сжиматься вместе с ним. Таким образом, элементы header и main уже реализованы как «резиновые», и осталось только сделать резиновыми колонки .info и .event.
Чтобы задать блоку правильную «резиновую» ширину, нужно разделить его фиксированную ширину на фиксированную ширину родительского элемента. Для колонки .info родительским элементом является main, фиксированная ширина которого составляет 460px. Поэтому делим 300px на 460px и получаем значение в процентах.
По аналогии поступим с колонкой .event. Её фиксированная ширина составляет 150px, а фиксированная ширина родительского элемента — 460px. Таким образом, «резиновая» ширина колонки будет 32.5%.
Мы успешно преобразовали фиксированную сетку в «резиновую». При уменьшении ширины экрана элементы header и main растягиваются до 100% ширины браузера, а колонки внутри main изменяют свою ширину, сохраняя те же пропорции, что и на широких экранах.
Помогла ли «резиновая» вёрстка решить проблему? Лишь частично.
Если немного уменьшить ширину окна браузера, интерфейс всё ещё выглядит приемлемо. Однако на очень узких экранах текст в колонках перестает помещаться.
Вывод: только «резиновой» вёрстки недостаточно. Единственное решение — перестраивать сетку для узких экранов.
Давайте вернёмся к фиксированным значениям в пикселях. Поместим сайт на очень узком экране мобильного устройства и добавим в самом низу стили, которые «сломают» нашу сетку.
Что будем ломать? Колонки внутри main! На мобильных устройствах почти никогда не удается уместить две колонки рядом. Оставим только одну колонку.
Переопределим значение flex-direction на column и вместо двух колонок получим одну.
Прокрутите сайт и посмотрите на ширину колонок, её тоже надо изменить.
Пусть обе колонки занимают всю ширину контейнера. Для этого нам нужно переопределить их ширину на width: auto;. Прокрутите сайт вниз и убедитесь, что это так.
Хорошо, сетка перестроена. И остается один вопрос...
Как сделать так, чтобы дополнительные стили, которые ломают сетку, применялись только на узких экранах?
Мы создали две версии сайта: одну — для десктопа (широкого экрана), другую — для мобильных устройств (узкого экрана). Сейчас стили работают одинаково в обеих версиях, и в обеих остается только одна колонка.
Чтобы стили изменялись в зависимости от внешних условий, нужно использовать медиавыражения.
Медиавыражение начинается с директивы @media, после которой идет условие и фигурные скобки. Стили внутри фигурных скобок применяются, когда выполняется указанное условие.
Ширина нашего «десктопа» — 500px, а «мобильного» устройства — 250px. Настроим дополнительные стили так, чтобы они применялись, когда ширина экрана меньше 300px. Для этого используем условие: max-width: 300px.
Чтобы условия в медиавыражениях срабатывали правильно, необходимо добавить на страницу мета-тег:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Перенесём дополнительные стили внутрь медиавыражения.
Теперь версии сайта отличаются: в «десктопной» версии — две колонки, а в «мобильной» — только одна. Медиавыражение работает!
Давайте ещё немного пошлифуем мобильную версию.
Уменьшим размер шрифта в шапке, выровняем текст по центру и уменьшим нижний отступ (паддинг). Шапка стала выглядеть более симметрично.
Добавим небольшой внутренний отступ для main, чтобы блоки не прилипали к краям браузера. Уберём верхний отступ, чтобы блоки стали ближе к шапке.
Уменьшим размер заголовков.
Уменьшим размер текста у других элементов.
Теперь у нас получился аккуратный мобильный интерфейс.
Так и создается адаптивная вёрстка: постепенно переопределяем свойства, чтобы они выглядели лучше на нужной версии сайта.
Давайте повторим принцип работы медиавыражений с помощью визуализации. Условие max-width: 300px срабатывает, когда ширина браузера находится в диапазоне от 0px до 300px. Как только ширина браузера превышает 300px, условие перестает действовать.
Ширина полосатого оверлея составляет ровно 300px. Медиавыражение срабатывает и стили мобильной версии активируются, когда браузер полностью укладывается в эту область.
Изменим условие медиавыражения на max-width: 480px. Теперь стили мобильной версии активируются намного раньше.
При какой ширине перестраивать сайт? Это сложный вопрос, который мы разберём позже. Для нашего примера значение 480px подходит лучше, чем 300px, так как колонки перестраиваются до того, как перестают помещаться на экран.
На этом первая глава курса про адаптивность завершена!
Вы познакомились с понятиями «фикс», «резина», «адаптивность», а также с принципом работы медиавыражений.
Продолжение следует.
