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

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

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

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

Для фронтенд-разработчиков адаптивная верстка — более сложная задача. Каждый макет нужно верстать отдельно, с собственной разметкой и стилями. Такой код сложнее поддерживать: если мы меняем внешний вид элемента, нам нужно изменить его во всех верстках.

Преимущества адаптивного дизайна:

• Точная настройка: каждый макет оптимизирован под конкретное разрешение.
• Детализация: мы можем тщательно проработать элементы интерфейса для каждого размера экрана.

Недостатки адаптивного дизайна:

• Большой объем работы: нужно создавать и поддерживать несколько макетов.
• Меньше гибкости: сложно адаптировать макеты под новые разрешения.

CSS-фреймворки

CSS-фреймворки — это наборы готовых решений, которые помогают нам избежать проблем с отображением сайта на разных устройствах и в разных браузерах. Каждый фреймворк предлагает свой подход к реализации адаптивного дизайна.

Вот некоторые из них:

Bootstrap. Самый популярный CSS-фреймворк в веб-разработке. Он позволяет нам легко и быстро адаптировать сайт под любое устройство с помощью 12-колоночной сетки.

Преимущества Bootstrap:

• Огромная библиотека готовых компонентов.
• Поддержка Sass и Less.
• Кроссбраузерность благодаря Normalize.css.

Materialize. Это платформа, созданная по принципам материального дизайна («карточки», плавные переходы, отсутствие острых углов, строгие макеты и анимации).

Особенности Materialize CSS:

• Набор стилей и инструменты для их реализации.
• 12-колоночная сетка.
• Поддержка Sass.

Bulma. Современный фреймворк, который использует Flexbox вместо традиционной сетки колонок. Это позволяет нам создавать гибкие и адаптивные макеты.

Особенности Bulma:

• Большое количество готовых компонентов.
• Поддержка Sass.

Pure. Набор небольших адаптивных модулей, которые мы можем использовать в любом проекте.

Особенности Pure CSS:

• Минимальное количество встроенных стилей: нам нужно будет писать свои собственные.
• 24-колоночная сетка.
• Не использует JavaScript.

CSS3 Media Queries (Медиа-запросы)

Это инструмент CSS, который позволяет нам управлять стилями элементов в зависимости от характеристик устройства пользователя.

Проще говоря: мы можем задавать условия, на основании которых браузер будет решать, какие стили применять к странице, а какие — нет.

Создание медиа-запроса начинается с ключевого слова @media, после которого указывается одно или несколько условий. В качестве условия можно указывать тип устройства или требования к определённой характеристике. Требование к определённой характеристике записывается в круглых скобках.

После составления @media, стили, указанные в нём, будут применяться только в том случае, когда итоговый результат вычисления условий является истинной.

Пример медиа-запроса с одним условием:

Пример медиа-запроса с комбинированием нескольких условий:

В @media можно указывать определённые типы устройств:

• all — для всех;
• print — для принтеров и в режиме предварительного просмотра страницы перед печатью;
• screen — для устройств с экранами;
• speech — для программ чтения с экрана

Например, этот @media только для экранов:

А здесь для экранов и принтеров:

Медиа-характеристика width, min-width и max-width позволяет задать условие на равенство ширины области просмотра определённому значению. Например, применим CSS только для viewport с шириной 320px.

Для задания условий в отношении высоты viewport можно использовать height, min-height и max-height.

Например, @media для высоты viewport больше 720px:

С помощью orientation  можно установить те или иные стили в зависимости от того, в каком режиме (альбомном или портретном) отображается сайт.

Например, в зависимости от ориентации viewport будем отображать разные картинки:

Характеристики aspect-ration, min-aspect-ratio и max-aspect-ratio позволяют задавать стили в зависимости от соотношения сторон viewport.

Характеристики resolution, min-resolution и max-resolution можно использовать, когда нужно задать стили в зависимости от плотности пикселей устройства.

Например, установим другой размер шрифта для устройств с плотностью пикселей на дюйм более 150:

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

Кроме <link>, их также можно использовать в @import:

Респонсивная верстка основана на идее, что пользователь получает один и тот же HTML и CSS, независимо от устройства. Внешний вид страницы адаптируется с помощью CSS-стилей и медиа-запросов.

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

Преимущества респонсивного дизайна:

• Гибкость: один макет автоматически адаптируется под разные устройства.
• Меньше работы: нам не нужно создавать отдельные макеты для разных разрешений.

Недостатки респонсивного дизайна:

• Сложная настройка: может потребоваться больше времени на настройку медиа-запросов и гибких элементов.
• Больше тестирования: нам нужно проверить отображение сайта на большом количестве размеров экранов.

Одним из инструментов для достижения адаптивного дизайна являются единицы измерения окна просмотра: vw, vh, rem, em и их комбинации. Далее мы покажем несколько примеров их использования.

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

vw и vh:

• vw (viewport width) равен 1% от ширины окна просмотра.
• vh (viewport height) равен 1% от высоты окна просмотра.

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

Сделаем наш заголовок более отзывчивым, задав ему динамическую высоту в 10vh. В зависимости от размера экрана заголовок всегда будет занимать 10% от высоты экрана:

Давайте рассмотрим несколько примеров использования vw и vh для создания респонсивного дизайна:

Создание полноэкранного раздела с фоновым изображением, которое подстраивается под высоту и ширину окна просмотра:

Расположите элементы относительно размера окна просмотра для создания более отзывчивого макета:

Настройка размеров шрифта с использованием единиц окна просмотра, чтобы текст оставался пропорциональным на разных устройствах. Это можно сделать так:

Однако использование только vw для размеров шрифта может привести к слишком маленькому или большому тексту на очень маленьких или очень больших экранах. Часто используют функцию clamp () для установки минимального и максимального размера шрифта:

Функция clamp () используется для динамической настройки размера шрифта элемента body, с тремя параметрами:

• Минимальное значение: 16px — это минимальный размер шрифта. Независимо от того, насколько мал станет экран, размер шрифта не опустится ниже 16 пикселей.
• Предпочитаемое значение: 2vw — этот размер позволяет шрифту динамически изменяться в зависимости от ширины окна просмотра. 2vw означает 2% от ширины окна просмотра, что делает размер шрифта адаптивным к ширине экрана.
• Максимальное значение: 24px — это максимальный размер шрифта. Даже если ширина окна просмотра станет очень большой, размер шрифта не превысит 24 пикселя.

И em, и rem — это относительные единицы измерения, которые считаются от размера шрифта.

rem (от root ephemeral unit — «главная относительная единица»).

em (от ephemeral unit — «относительная единица измерения») или корневого элемента

В современных браузерах корневой размер шрифта равен 16px, следовательно, 1rem = 16px.

Пусть размер шрифта корневого элемента <html> будет равен 16 пикселям:

Тогда размер шрифта элемента с классом block будет равен 16px × 1,5 = 24px:

Значение в единицах em всегда рассчитывается от размера шрифта элемента: оно либо наследуется от родителя, либо задаётся на самом элементе. Продолжая наш пример, если элементу блока просто задать ширину 5em, то для расчёта будет использован унаследованный размер шрифта: 16px × 1,5 × 5 = 120px.

А если самому элементу задать размер шрифта 2em, то к унаследованному размеру добавится ещё один множитель: 16px × 1,5 × 5 × 2 = 240px.

Адаптивный дизайн лучше подходит для проектов, где мы заранее знаем, на каких устройствах будет использоваться сайт, и где есть четкие требования к макету. Он позволяет нам точно настроить интерфейс под каждое устройство.

Респонсивный дизайн — более универсальный и гибкий подход. Он идеален для проектов, где нам нужна поддержка большого числа устройств и размеров экранов.

Как правило, респонсивный дизайн — это более практичное и гибкое решение. Но перед началом проекта лучше уточнить у клиента, нужен ли ему дизайн под какое-то конкретное устройство.