Что такое mobile-first подход в CSS?

Mobile-first — стили пишутся сначала для маленьких экранов, а для больших добавляются через min-width в media query.

Как выглядит

.nav { display: block; }              /* базовый вид для телефона */

@media (min-width: 768px) {
  .nav { display: flex; gap: 16px; }  /* усложняем для планшета */
}

@media (min-width: 1200px) {
  .nav { gap: 32px; }
}

Почему так

• Мобильные устройства слабее: им не нужно переопределять тяжёлые десктопные стили.
• Простая базовая раскладка обычно один столбец, и её легко расширять.
• Меньше переопределений, чем при max-width, когда сначала описывают десктоп и затем откатывают.

Дополнительно

Обязательный тег для адаптивности: <meta name="viewport" content="width=device-width, initial-scale=1">. Без него мобильный браузер масштабирует страницу как десктопную.

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

Сначала простая версия для телефона, затем расширение через @media (min-width: ...).