Адаптивный веб-дизайн

Адаптивным веб-дизайном называется дизайн веб-страниц, обеспечивающий правильное отображение сайта на различных устройствах, подключённых к интернету, подстраивая сайт под заданные размеры окна браузера.

Увидеть, как ваш сайт будет выглядеть на разных устройствах можно несколькими способами:

Меняя размеры окна браузера на своём компьютере.
Воспользовавшись специальной функцией браузера. В Mozilla Firefox она вызывается сочетанием клавиш Ctrl + Shift + M, в Google Chrome - клавишей F12, затем тоже нужно нажать Ctrl + Shift + M.
При помощи онлайн-сервисов. Например, этого: https://search.google.com/test/mobile-friendly?hl=ru

Когда вы пишете адаптивную веб-страницу, обязательно добавьте в секцию head следующий код:


        <meta name="viewport" content="width=device-width, initial-scale=1">

Дело в том, что браузеры мобильных устройств по умолчанию пытаются уменьшить страницу, чтобы она влезла в окно браузера. В результате наш адаптивный дизайн просто не будет работать.

Резиновый дизайн

Пожалуй, самый очевидный способ добиться адекватного отображения сайта на разных разрешениях экрана - использовать "резиновый дизайн". То есть указывать размеры всех (или некоторых) элементов в относительных единицах. Не в пикселях, а в процентах (от длины / ширины "родительского блока" или окна браузера). Пример кода CSS для создания типового "резинового" макета сайта из четырёх блоков вы можете посмотреть по этой ссылке.

Однако есть и более "продвинутые" и современные способы. Например, использование Flexbox.

Flexbox

Flexbox можно перевести на русский язык как "гибкая коробка". Это модуль CSS, специально предназначенный для создания адаптивных веб-страниц. Он работает так:


        #block {

          display: flex; /*Включаем для нашего блока-контейнера (которому мы присвоили id = block) режим отображения flexbox */

          flex-direction: row; /* Устанавливаем способ размещения других блоков внутри этого блока. В данном случае - по горизонтали, в ряд. */

          flex-wrap: nowrap; /* Говорим браузеру, что вложенные блоки не нужно переносить в другой ряд, если места будет не хватать. Браузер будет сжимать их, меняя размер. */

          justify-content: space-around; /* Располагаем вложенные блоки в ряду так, чтобы между ними, до и после них оставалось свободное место */

          align-items: center; /* Выравниваем вложенные блоки, но не по горизонтали, а по вертикали. В данном случае - по центру. */

        }

В этом примере я показал далеко не все возможности Flexbox и не привёл все возможные значения использованных правил. В вашем справочнике нет документации по Flexbox, потому что это достаточно свежее нововведение. Ознакомиться с ней вы можете по этой ссылке.

Задание 1 (на занятии)

Чтобы понять Flexbox, нужна практика. На этот раз попрактикуемся в игровой форме. Откройте документацию по Flexbox. Затем (в другом окне или вкладке браузера) откройте эту ссылку: https://flexboxfroggy.com/ Там находится игра, в которой нужно помогать лягушке попасть в пруд при помощи кода CSS. Игра на английском, но знать его не обязательно. Слева в окне вы пишете код CSS, который нужен, чтобы пройти уровень. Ранее открытая документация вам в помощь. Когда код написан, происходит переход на следующий уровень. Пришлите мне количество пройденных вами уровней и код CSS, который вы написали для последнего из них.

Медиа-запросы

Flexbox и "резиновый дизайн" - это не панацея, и бывают случаи (причём, довольно часто), когда их возможностей не хватает, чтобы получить желаемое. Например, нам нужно, чтобы блоки на экране компьютера выстраивались по горизонтали, а на экране телефона - по вертикали (как здесь). Или нам нужен разный размер шрифта на разных устройствах. Здесь нам на помощь приходят медиа-запросы.

Они позволяют сайту запросить данные браузера, с помощью которого пользователь его просматривает. И изменить веб-страницу по заранее заданной программе. Синтаксис медиа-запроса выглядит так:


          @media (условие) {селектор { правило CSS}}

          /* Например */

          @media (max-width: 740px) {.block {

            width: 90%;

            margin-top: 2%;

          }}

          /* Если ширина окна просмотра браузера меньше 740px, то ко всем элементам класса block применяются следующие правила: ширина 90%, отступ сверху 2%. */

Помните, что браузер читает код CSS сверху вниз. Поэтому ваш медиа-запрос должен находиться после описания правил для того селектора, к которому он применяется. Иначе запрос не сработает (точнее, выполнится, но результат его выполнения будет отменён правилами для селектора, которые идут после него). По этой же причине, если у вас, к примеру, несколько медиа-запросов максимальной ширины (max-width) идут друг за другом, то самым первым должен быть запрос с наибольшим числом в условии.

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

320 px — Мобильные устройства (портретная ориентация);
480 px — Мобильные устройства (альбомная ориентация);
600 px — Небольшие планшеты;
768 px — Планшеты (портретная ориентация);
1024 px — Планшеты (альбомная ориентация)/Нетбуки;
1280 px и более — PC.

Задание 2 (на дом)

Возьмите веб-страницу, которую вы создали в ходе выполнения второго задания на прошлом занятии. Измените файл с кодом CSS так, чтобы страница стала адаптивной. Обязательно используйте Flexbox и медиа-запросы.