Отзывчивый дизайн

Термин ввёл Итан Маркотт в статье «Responsive Web Design» в 2010 году. Он предложил три составляющие: резиновую сетку в процентах вместо пикселей, гибкие изображения, которые не вылезают за контейнер, и медиазапросы для перестройки там, где резины уже не хватает. Идея была в том, чтобы делать один макет, который работает на экранах любого размера, а не отдельную мобильную версию на поддомене.

В русскоязычной практике такой подход часто тоже называют адаптивным. Строгое различие: адаптивный дизайн в узком смысле — это несколько фиксированных раскладок, а отзывчивый — непрерывная подстройка, в которой фиксированных ширин почти нет.

Как выглядит на современном CSS

img, video { max-width: 100%; height: auto; }

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
}

h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); }

В этом фрагменте нет ни одного медиазапроса. Сетка сама решает, сколько карточек шириной от 16rem поместится в строку: на телефоне одна, на ноутбуке четыре. Отступы и заголовок растут вместе с окном, но не выходят за заданные минимум и максимум благодаря clamp().

От медиазапросов к контейнерам

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

Что проверить при приёмке

• Страница не даёт горизонтальной прокрутки на ширине 320 пикселей — по-прежнему встречаются телефоны с таким вьюпортом.
• Окно браузера можно плавно сужать без «ломаных» промежуточных состояний между точками перелома.
• Таблицы, длинные ссылки и код не распирают блок; для таблиц есть прокрутка внутри обёртки.
• Кнопки и ссылки на сенсорных экранах достаточно крупные, а ховер-эффекты не прячут важное.

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