Основы адаптивной вёрстки

Рассмотрим основы адаптивной вёрстки, что такое область просмотра (viewport), как использовать @media запросы и некоторые не самые очевидные нюансы

0

Что такое адаптивная вёрстка?

Адаптивная вёрстка подразумевает под собой вёрстку под разные устройства на основе @media запросов. Если условие @media запроса выполняется, то будут применены соответствующие стили

@media запросы могут быть основаны на размерах, типе, ориентации, разрешении, пропорциях устройства, на различных состояниях элементов, и других условиях, включая даже уровень окружающего освещения

В данной статье рассмотрим основы адаптивной вёрстки, основанной на размерах области просмотра (viewport)



Область просмотра (viewport)

Область просмотра (viewport) - основная часть браузера, где отображается контент.

Чтобы @media запросы корректно работали на мобильных устройствах необходимо добавить специальный мета тег <meta name="viewport">

Мета тег <meta name="viewport"> отвечает за размер области просмотра и масштаб страницы на мобильных устройствах

Мета тег <meta name="viewport"> размещаем в HTML файле в секции <head></head>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- добавляем мета тег viewport -->

    <title>Adaptive</title>
    <link rel="stylesheet" href="css/bootstrap-reboot.min.css">
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body></body>
</html>

Для мета тега <meta name="viewport"> добавляем атрибут content="" и указываем в нём необходимые свойства через запятую <meta name="viewport" content="width=device-width, initial-scale=1">

width=device-width - область просмотра (viewport) будет равняться ширине мобильного устройства

initial-scale=1 - устанавливает масштаб страницы при первой загрузке

Этих свойств достаточно, чтобы @media запросы корректно работали на мобильных устройствах


Существуют дополнительные свойства, которые можно добавить для мета тега <meta name="viewport"> в атрибуте content=""

maximum-scale=3.0 - устанавливает максимально возможное значение масштабирования

minimum-scale=0.86 - устанавливает минимально возможное значение масштабирования

user-scalable=no - запрещает масштабирование

shrink-to-fit=no - исправляет отображение области просмотра (viewport) в браузере Safari на iOS



Как узнать размеры области просмотра (viewport)?

Для разработки и тестирования адаптивной вёрстки по размерам области просмотра (viewport) необходимо определить эти размеры

Браузеры Google Chrome и Mozilla Firefox имеют инструменты для тестирования адаптивной вёрстки, которые отображают размеры внутреннего окна и могут устанавливать необходимый размер окна по введенным значения

Чтобы открыть инструмент для адаптивной вёрстки в Mozilla Firefox нажимаем клавишу F12 и в инструментах разработчика в правом верхнем углу нажимаем на иконку со смартфоном и планшетом

1

Окно станет выглядеть следующим образом

2

В Google Chrome аналогично - нажимаем клавишу F12 и в инструментах разработчика в левом верхнем углу нажимаем на иконку со смартфоном и планшетом

3

Окно станет выглядеть следующим образом

4

@media запросы основаны на полной ширине окна браузера, включая полосы прокрутки - подробнее об этом в статье Плагин для отображения размеров окна браузера

Если кратко, то на мобильных устройствах и в браузерном инструменте для адаптивной вёрстки полоса прокрутки (scrollbar) не влияет на размеры контентной части, а в десктопных браузерах когда появляется полоса прокрутки (scrollbar), то она отнимает у контентной части около 17px. На мобильных контент будет на всю ширину браузера, а к примеру, на десктопных браузерах при ширине 1200px, если есть полоса прокрутки, то контентная часть будет около 1183px - этот нюанс не самый очевидный, но нужно его учитывать



@media запросы

Существует два подхода адаптивной вёрстки по размерам области просмотра (viewport) - Mobile First и Desktop First.

При Mobile First верстаем от меньшего экрана к большему и применяем @media (min-width: 1200px)

При Desktop First верстаем от большего экрана к меньшему и применяем @media (max-width: 1199.98px)

На практике Mobile First встречается реже, чем Desktop First, поэтому обычно сначала верстаем макет для больших экранов, затем с помощью @media запросов адаптируем макет под меньшие экраны, используя контрольные точки (breakpoints).

@media запросы записываются в CSS файле следующим образом


@media (min-width: 1200px) {
  /* стили указанные здесь применяются, если ширина viewport больше или равно 1200px */
}

@media (max-width: 1199.98px) {
  /* стили указанные здесь применяются, если ширина viewport меньше или равно 1199.98px */
}

Разница в 0.02px нужна для избежания пересечения @media запросов, чтобы разные стили не применялись для двух разных @media запросов одновременно



Контрольные точки (breakpoints)

Для примера возьмем контрольные точки, которые используются в Bootstrap

Bootstrap использует @media запросы основанные на размерах большинства устройств, поэтому не обязательно придумывать свои контрольные точки, а при необходимости можно добавить еще @media запросы или изменить существующие

@media (max-width: 1199.98px) {  }

@media (max-width: 991.98px) {  }

@media (max-width: 767.98px) {  }

@media (max-width: 575.98px) {  }


Логика адаптивной вёрстки Desktop First

Предположим, есть макет шириной 1170px. Верстаем его в браузере на большом экране. Пишем основные стили. Когда десктоп версия макета готова, начинаем делать адаптивную вёрстку.

Устанавливаем ширину окна браузера в 1200px - минимальная ширина до первого @media запроса @media (max-width: 1199.98px) { }.

Проверяем вёрстку при этих размерах. Если вёрстка соответствует макету, элементы не выходят за границы окна браузера, и не появляется горизонтальной полосы прокрутки, то продолжаем.

Устанавливаем ширину браузера в 992px - минимальная ширина до следующего @media запроса @media (max-width: 991.98px) { }

Делаем первый @media запрос - @media (max-width: 1199.98px) { }

При ширине окна браузера 992px элементы сужаются, выходят за границы окна браузера, создают горизонтальную полосу прокрутки (scrollbar). Поэтому внутри @media запроса @media (max-width: 1199.98px) { } начинаем переназначать предыдущие стили элементов так, чтобы вёрстка выглядела корректно - уменьшаем отступы, размер шрифта, какие-то элементы переносим или скрываем и так далее - все зависит от требований к макету.

Обратите внимание, что мы не должны переписывать все свойства элементов, а только переназначаем необходимые свойства

Если дизайнер не предоставил макеты на определенную ширину или заказчик не указал требования к адаптивной вёрстке, делаем на своё усмотрение, но соблюдая основную идею дизайна - уменьшать элементы и отступы пропорционально и переносить/скрывать блоки так, чтобы логика сохранялась

Когда вёрстка при ширине браузера 992px выглядит корректно, то устанавливаем браузеру ширину в 768px - минимальная ширина до следующего @media запроса @media (max-width: 767.98px) { }.

Переназначаем стили в блоке @media запроса @media (max-width: 991.98px) { }, чтобы вёрстка выглядела корректно теперь при ширине 768px

Далее устанавливаем ширину 576px и переназначаем стили в блоке @media (max-width: 767.98px)

Если дизайнер/заказчик не указали минимальную ширину для адаптивной вёрстки, то устанавливаем 320px. Для этой ширины переназначаем стили элементов в блоке @media запроса @media (max-width: 575.98px) { }

Когда вёрстка будет выглядеть корректно при всех вышеописанных размерах браузера (1200px, 992px, 768px, 576px, 320px), проверяем вёрстку плавно изменяя размер окна от большего к меньшему, чтобы убедиться что при промежуточных размерах вёрстка не ломается. При неоходимости корректируем стили элементов в том блоке @media запроса, где элементы отображаются некорректно, для этого используем инструменты разработчика (devtools) в браузере



Инструменты разработчика (devtools)

Инструменты разработчика позволяют быстро найти элемент, посмотреть его размеры, отступы, стили, расположение стилей, использование @media запросов, менять значение свойств прямо в браузере

Открыть инструменты разработчика можно нажатием клавиши F12

Чтобы просмотреть сразу расположение элемента и отобразить его свойства нажимаем правой кнокой мыши на элемент и выбираем Исследовать элемент в Mozilla Firefox или Просмотреть код в Google Chrome

Например, хотим узнать про элемент заголовка карточки, нажимаем на нём правой кнопкой мыши и выбираем Исследовать элемент в Mozilla Firefox

10

Открывается окно инструментов, где с левой стороны видим расположение элемента в HTML, а справой стороны CSS свойства элемента

11

Чтобы визуально посмотреть размеры и отступы элемента, в левой части инструментов разработчика наводим курсор мыши на элемент, и в браузере будут отображены свойства элемента

16

В правой части инструментов разработчика можно выбрать значение CSS свойства и назначить другое значение, в браузере сразу же будут видны изменения.

Значение можно писать вручную или постепенно менять значение стрелками вверх или вниз на клавиатуре.

12

При вводе значения вручную будут выводиться подсказки

13

Если значение некорректно и не применяется, то будет перечеркнуто

14

Можно самостоятельно отключить необходимое свойство, нажав на чекбокс перед этим свойством

15

Можно назначить новое свойство, нажав на пустое место в пределах блока свойств элемента. Также будут выведены подсказки возможных свойств

16

Все эти изменения сразу отображаются в браузере, что удобно при разработке и отладке адаптивной вёрстки. После перезагрузки страницы изменения сбрасываются

Также можно посмотреть расположение стилей - указывается имя файла, строка в файле и использование @media запросов

18



Простой пример адаптивной вёрстки

Полный пример на Codepen

Ниже распишу только ключевые моменты адаптивности

Начальные стили десктоп вёрстки при ширине 1200px

.container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}
.cards__col {
  width: 33.33333333%;
  padding: 0 15px 30px;
}

5

При ширине 992px карточки немного сужаются, но все еще отображаются корректно, поэтому пока без изменений

6

При ширине 768px карточки становятся очень узкими, поэтому переназначаем свойство карточки width, чтобы карточки отображались по две в ряд

@media (max-width: 991.98px) {
  .cards__col {
    width: 50%;
  }
}

7

При ширине 576px карточки также становятся узкими, поэтому снова переназначаем свойство карточки width чтобы карточки отображались по одной

@media (max-width: 767.98px) {
  .cards__col {
    width: 100%;
  }
}

8

При ширине 320px карточкам не хватает места, и они также выглядят довольно узкими, поэтому уменьшим внутренние отступы padding контейнера .container

@media (max-width: 575.98px) {
  .container {
    padding: 0 15px;
  }
}

9

Пример специально взял упрощенный, чтобы просто показать логику адаптивной вёрстки. Возможно, через некоторое время запишу видео с адаптивной вёрсткой более сложной секции и добавлю в эту статью



Дополнительно

Немного дополнительной информации по адаптивной вёрстке

@media запросы по размерам viewport могут быть как по ширине, так и по высоте, но используется обычно реже

@media (max-height: 719.98px) {
  .container {
    padding: 0 15px;
  }
}

@media (min-height: 720px) {
  .container {
    padding: 0 15px;
  }
}

@media запросы можно комбинировать, например нужны только стили для планшетных экранов в диапазоне от 576px до 767.98px

Стили назначенные в таком @media запросе будут применены только если все условия выполнены

@media (max-width: 767.98) and (min-width: 576px)  {
  .container {
    background: red;
  }
}

Можно определять свойства сразу для нескольких разных условий - такой @media запрос выполняется если хотя бы одно из перечисленных условий выполнено, например экраны меньше 575.98px и больше 1440px

@media (max-width: 575.98px), (min-width: 1440px)  {
  .container {
    background: red;
  }
}

Для упрощения адаптивной вёрстки желательно использовать Flexbox, Grid.

Желательно стараться использовать не фиксированные, а относительные величины (%, vw, vh, em, rem и так далее)



Итоги

В статье разобрали основы адаптивной вёрстки, но этих знаний достаточно, чтобы начать делать адаптивную вёрстку.

На практике можно применять дополнительные возможности @media запросов отталкиваясь от уже полученной информации.

При возможности, статья еще будет дополняться



Полезные ссылки

Использование медиа-запросов

Использование метатега viewport для управления разметкой на мобильных браузерах