Что такое адаптивная верстка

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

Хороший ответ на интервью можно построить так: сначала назовите цель, потом инструменты, затем практический риск.

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

Не нужно перечислять все CSS-возможности подряд. Лучше покажите, что понимаете, где каждая помогает.

• Flexbox удобен для одномерного расположения, переносов и выравнивания.
• Grid удобен для двухмерных сеток, карточек и областей страницы.
• @media меняет правила, когда макету не хватает места или меняется устройство ввода.
• rem, %, vw, clamp() помогают не привязывать все к фиксированным пикселям.
• srcset и sizes помогают не грузить на телефон изображение, рассчитанное на большой монитор.

Важно не говорить, что адаптивность равна медиазапросам. Часто устойчивый макет можно сделать без большого числа брейкпоинтов.

Если вас просят объяснить процесс, не начинайте с набора размеров устройств. Сначала смотрите на контент и пользовательский сценарий. Брейкпоинт нужен там, где карточка становится слишком узкой, меню перестает помещаться, текст теряет читаемость или кнопка становится неудобной для нажатия.

Это звучит сильнее, чем ответ "я делаю 768 и 1024". Такой ответ показывает, что вы не просто копируете сетку из фреймворка, а проверяете качество интерфейса.

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

/* Плохо: сетка легко ломается на промежуточных ширинах */
.cards {
  display: flex;
}

.card {
  width: 320px;
}

Более устойчивый вариант: дать сетке самой подобрать количество колонок и ограничить минимальный размер карточки.

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

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

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

.layout {
  display: grid;
  gap: 1rem;
}

@media (min-width: 48rem) {
  .layout {
    grid-template-columns: 16rem 1fr;
  }
}

В ответе можно добавить, что mobile-first не значит думать только о телефонах. Это способ задать простую базу и постепенно усложнять интерфейс там, где для этого есть место.

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

Если вы меняете порядок блоков через CSS, проверьте, не стал ли визуальный порядок конфликтовать с порядком чтения и фокуса. Это особенно важно для клавиатуры и скринридеров.

Картинки часто дают самый заметный практический эффект. Если на телефон загружается десктопное изображение шириной 2400 пикселей, страница будет медленнее, даже если CSS уменьшит его до 360 пикселей.

<img
  src="/images/hero-800.webp"
  srcset="/images/hero-400.webp 400w, /images/hero-800.webp 800w, /images/hero-1600.webp 1600w"
  sizes="(max-width: 48rem) 100vw, 50vw"
  width="800"
  height="500"
  alt="Интерфейс продукта"
/>

Здесь браузер получает варианты и выбирает подходящий ресурс. Атрибуты width и height помогают зарезервировать место и снизить риск скачков layout.