Уро13_Адаптивная верстка

Адаптивная верстка сайта — это формирование структуры документа на базе HTML-разметки, предусматривающей автоматическое изменение страницы в зависимости от размера экрана пользователя. Простыми словами это макет страницы, автоматически подстраивающийся под размер экрана пользователя.
Адаптивная верстка позволяет просматривать контент без скролла страницы, а характерная для десктопа полоса прокрутки в правой части страницы просто отсутствует.
Адаптивность — важнейшее требование, которое предъявляется к современному сайту, особенно в текущих условиях поисковой оптимизации. И вот почему:
Удобство для пользователей. Такие сайты удобны для просмотра на любых устройствах: от смартфонов и планшетов до телевизоров. Если страница остается читаемой только на десктопе, а мобильному пользователю приходится прикладывать определенные усилия, чтобы тапнуть по элементу или даже просто ознакомиться с контентом, то количество отказов на сайте резко увеличится.
Больше трафика. Без адаптивности сайт теряет огромный сегмент аудитории, который связан с мобильными устройствами. Соответственно, и трафик, который они могли бы привести.

Улучшенная и более точная веб-аналитика. Сайт один (а не два, как с мобильной версией) — поэтому проще вычислять ключевые показатели эффективности бизнеса.
Экономнее в долгосрочной перспективе. Вместо того чтобы каждый раз разрабатывать сайт для разных размеров экрана, адаптивный веб-дизайн можно создать только один раз.
Лучший пользовательский опыт. Например, в розничной торговле покупатель может начать свой путь с мобильного устройства, а продолжить его с десктопа или ноутбука. Можно поддерживать пользовательский опыт в каждой точке взаимодействия.
Более простое администрирование. Один сайт — быстрее и легче.
Лучшая адаптация для SEO. Отсутствует дублирование контента, как в случае с двумя и более версиями сайта.

Устройство адаптивной верстки
Медиазапросы стилей
Медиа-запросы — это правила-триггеры, применяемые к CSS, которые реагируют на тип устройства, тип экрана, отображаемый браузер или даже ориентацию устройства. Цель медиа-запроса — разделить использование различных макетов с задействием одних и тех же блоков контента, каждый из которых оптимизирован для размера или функций рассматриваемого устройства.
Медиа-запрос следует правилу, основанному на параметрах минимальной и/или максимальной ширины, наряду с другими факторами (например, разрешение, браузер и ориентация экрана).

«Жидкие» сетки
Адаптивный веб-дизайн использует алгоритм для нормализации элементов пользовательского интерфейса к размеру экрана и пикселям. Делается это с помощью так называемого «жидкого макета», в котором каждый компонент учитывается в процентах, которые он занимает по ширине.
Блок содержимого, изображение и отступы между блоками и вокруг них складываются вместе, чтобы составить 100 % в ширине.

Гибкие изображения
Изображения должны быть созданы в относительных единицах. В адаптивной верстке они называются «эффективными пикселями» (epx). Эти единицы используются для выражения размеров макета и интервалов. Элементы должны быть разработаны с базовой единицей 4 epx, чтобы дизайн всегда масштабировался до целого числа при применении гибкой сетки.
Могут быть и другие варианты реализации гибких изображений:

Относительность и размеры
Адаптивная верстка предусматривает относительность буквально во всем. Например, в определении размера шрифта, размера отступов и конечно, ширины и высоты.
Относительные значения определяют 4 главных параметра:
Ширину (width);
Высоту (heights);
Межблоковое расстояние или отступы (margin);
Отступ от контента до границы блока (padding).
Все вышеуказанные параметры чаще всего прописываются в процентном соотношении. Также допустимо задействовать vw* и vh* (только внутри div-тега):
vw (сокращенно от Viewport Width) – процентная величина от суммарной ширины области viewport’а (пользовательская область просмотра);
vh (сокращенно от Viewport Height) — процентная величина от суммарной высоты viewport’а.

Breakpoints
Это точки слома или контрольные точки, триггеры, при достижении которых изменяется отображение страницы. Контрольные точки определяют конкретное изменение макета в соответствии с пользовательским устройством и связывают все компоненты страницы с шириной экрана.
Размеры экранов для адаптивной верстки
Контрольные точки по умолчанию принято использовать с каноническими значениями плотности пикселей:
Мониторы full-hd — от 1920 px.
Мониторы низкого класса (не full-hd) — от 1280 px.
Мобильные устройства высокого класса (смартфоны) — от 320 px.
Нетбуки — от 1024 px.
Планшеты — от 768 px.
Размерность шрифтов
Адаптивная верстка подразумевает использование 2 единиц — em (допускает вариативность для любого элемента документа) и rem (задается один раз на страницу). Em — это размер шрифта, который используется на смартфоне или другом мобильном устройстве по умолчанию. Прописываем 3em — получаем шрифт втрое больше, чем главный шрифт страницы для конкретного устройства.

Медиа-запросы
Медиа-запросы стали актуальными в CSS3. На сегодня они поддерживаются всеми современными браузерами, среди которых Chrome, Opera, Firefox, Safari.
Синтаксис медиа-запросов
Запись медиа-запросов в теле сайта выглядит вот так:
Можно добавлять их в HTML-части сайта, внутри таблицы CSS, а также напрямую в код страницы.

Главные виды устройств, которые можно прописывать в медиа-запросах:
все устройства — all;
устройства с экранами — screen;
синтезаторы речи — speech;
принтеры или страница предварительного просмотра для печати — print.
Когда-то раньше также использовались:
проекторы — projection;
телевизоры — tv;
смартфоны и другие мобильные устройства — handheld.
Также медиа-запросы могут содержать в себе логические операторы, такие как:
and — все условия должны выполняться одновременно;
, — хотя бы одно из условия должно выполняться, аналогично «или»;
not — отрицание условия (имеет более низкий приоритет, чем and, а значит будет выполняться после него).

Для составления условий можно использовать некоторые функции:
width (max-width и min-width) — определяет требования к ширине браузера, наибольшее и наименьшее значения этого параметра в пикселях или других единицах: @media(width: 720px);
height, min-height и max-height — прописывает требования к высоте браузера, аналогично функциям ширины: @media (max -height: 1080px);
color определяет количество бит на канал цвета (также есть значения min и max);
aspect-ratio (min-aspect-ratio, max-aspect-ratio) — отношения ширины к высоте: @media screen and (device-aspect-ratio: 1920/1080);
orientation — оценивает режим отображения страницы: портретный (portrait) или альбомный (landscape);
resolution (min-resolution, max-resolution) — это разрешение устройства ввода: требуемое, минимальное и максимальное; измеряется в dpi, dpcm или dppx.

Какие бывают медиа-запросы
Медиа-запросы могут записываться в виде атрибута для элемента link. Это помогает определить, какие файлы CSS-таблиц нужно активировать на странице в зависимости от характеристик устройства. Такой функционал чаще всего используется, когда к разным типам технического оборудования применяются разные стили CSS.
Приведем в пример фрагмент кода, который иллюстрирует подключение файла styles-xs.css для устройств, размер экрана которых меньше 543 пикселей:
Также подобные запросы можно включать в состав правила @import, отвечающего за импорт стилей из других CSS-файлов. Так, для того же файла можно записать следующий код:

Медиа-запросы можно реализовывать для Bootstrap сетки. Например, можно прописать media queries в порядке увеличения размеров для нескольких классов устройств: