Есть два способа думать об адаптивной вёрстке: сначала спроектировать сайт под широкий экран, а потом урезать его под маленький, либо наоборот — начать с самого узкого экрана и постепенно добавлять сложность для более широких. Второй подход и называют mobile-first.
На уровне CSS это выражается конкретно: базовые стили без единого медиазапроса описывают внешний вид на маленьком экране, а затем через min-width добавляются уточнения для более широких. Это противоположность подходу, где сначала пишут стили под десктоп, а потом переопределяют их через max-width для меньших экранов.
У mobile-first есть практическое преимущество, помимо чисто идеологического — на маленьком экране обычно меньше элементов и более простая структура, поэтому естественно начинать именно с простого варианта и наращивать сложность, а не наоборот, урезая уже готовый сложный макет.
Такой подход дисциплинирует и с точки зрения контента: если на маленьком экране сразу продумать, какая информация действительно важна в первую очередь, итоговая страница часто получается более сфокусированной даже на широких экранах, без лишнего визуального шума.
Производительность тоже выигрывает — стили для базового, мобильного варианта загружаются и применяются всегда, а дополнительные, более сложные правила для широких экранов подключаются только тогда, когда экран действительно достаточно широк, через условие в медиазапросе.
На практике многие современные CSS-фреймворки и подходы к вёрстке изначально построены именно вокруг mobile-first логики, и знакомство с ней облегчает работу с большинством актуальных инструментов вёрстки.
Основы mobile-first подхода и его отличия от классического desktop-first разбираются в статье про основы адаптивного дизайна на web.dev.
