Как реализовать адаптивную верстку

Что проверяют

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

Как отвечать

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

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

Дальше подход mobile first: базовые стили пишутся под узкий экран, расширения добавляются через min-width. Такие правила накладываются друг на друга предсказуемо, в отличие от каскада из max-width. Брейкпоинты выбираются по моменту, когда ломается контент, а не по списку моделей телефонов.

Резиновая основа важнее самих брейкпоинтов:

.container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
h1 { font-size: clamp(1.5rem, 4vw, 3rem); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }

Такая сетка перестраивает число колонок вообще без медиазапросов. Flexbox с flex-wrap решает ту же задачу для рядов, где элементы разной ширины.

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

.card-wrap { container-type: inline-size; }
@container (min-width: 400px) { .card { flex-direction: row; } }

Что ещё обязательно проговорить:

• Изображения: max-width: 100%, srcset/sizes или <picture> под разные плотности, явные width/height либо aspect-ratio, чтобы страница не прыгала при загрузке.
• 100vh на мобильных скачет из-за адресной строки, вместо него dvh или svh.
• Широкий контент (таблицы, блоки кода, диаграммы) прячется в контейнер с overflow-x: auto, чтобы горизонтально скроллился он, а не вся страница.
• Тач: цели нажатия от 44px, hover на тач-экранах не срабатывает, различать через @media (hover: hover).
• Проверка: device toolbar в DevTools, реальные устройства, зум 200 процентов, prefers-reduced-motion и prefers-color-scheme.

Где спотыкаются

Верстают под конкретные разрешения фиксированными пикселями и добавляют брейкпоинт под каждую новую модель. Второе: забывают метатег viewport, а потом объясняют, что «медиазапросы не работают на телефоне».