В чем разница между подходами к адаптивности в CSS?

Есть два основных подхода к адаптивности: mobile-first и desktop-first, а также более новые инструменты — fluid-значения и container queries.

Mobile-first

Базовые стили пишутся для узких экранов, а широкие добавляются через min-width:

.grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) {
  .grid { grid-template-columns: 1fr 1fr; }
}

Проще и легче для мобильных устройств — им не нужно переопределять «десктопные» стили.

Desktop-first

Базовые стили для широких экранов, упрощение через max-width. Встречается в старых проектах.

Fluid-значения

clamp(), проценты, vw плавно меняют размеры без точек перелома:

h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

Container queries

Компонент подстраивается под ширину своего контейнера, а не всего окна:

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

Коротко для собеседования

Обычно mobile-first с min-width, плавные размеры через clamp(), а для переиспользуемых компонентов — container queries.

Подробнее: MDN — Адаптивный дизайн