Что такое mobile first

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

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

Как отвечать

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

.cards { display: grid; gap: 12px; }
@media (min-width: 60rem) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}

Отличие от desktop first в направлении запросов: min-width вместо max-width. Это не косметика. При таком направлении мобильный браузер получает самый короткий путь исполнения, а всё тяжёлое (многоколоночные сетки, эффекты, крупные изображения) подключается только там, где действительно нужно.

Что ещё входит в ответ: обязательный мета-тег viewport, гибкие единицы и clamp вместо фиксированных ширин, srcset и sizes для изображений, размер зон нажатия под палец, бюджет на вес первой загрузки. Для компонента, который живёт в разных местах страницы, уместнее контейнерные запросы: они смотрят на ширину родителя, а не окна.

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

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

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

Урезают мобильную версию по содержанию. Прятать часть функций и текста на узком экране опасно: индексация идёт по мобильной версии, и то, чего в ней нет, для поиска не существует. Менять надо форму подачи, а не состав.

Проверяют только в узком окне десктопного браузера. Сжатое окно не показывает ни медленный процессор, ни реальную сеть, ни клавиатуру поверх формы, ни адресную строку, съедающую высоту: нужен недорогой телефон или хотя бы эмуляция замедления.