Как работают подходы mobile-first и desktop-first и как используются breakpoint'ы и медиа-запросы

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

Понимаете ли вы, как направление медиа-запросов влияет на каскад и объём переопределений, и умеете ли выбирать брейкпоинты не по моделям телефонов. Следом часто спрашивают про container queries.

Как отвечать

Суть подходов в том, какие стили считаются базовыми:

• mobile-first: без медиа-запросов пишется узкий экран, а широкие добавляются через @media (min-width: 768px). Стили наращиваются: одна колонка, потом две, потом три;
• desktop-first: базой идёт широкий макет, узкие экраны правятся через max-width. Приходится отменять заданное: убирать колонки, прятать сайдбар, сбрасывать отступы.

Сейчас стандарт mobile-first, на нём построены Tailwind (md: означает «от 768px и шире») и Bootstrap 5. Причина не в скорости загрузки, а в том, что наращивать простое проще, чем разбирать сложное.

Про брейкпоинты скажите три вещи. Их ставят там, где ломается контент, а не под конкретный телефон. Внутри проекта держатся одного направления, чтобы диапазоны не пересекались. И удобен синтаксис диапазонов из Media Queries Level 4: @media (width >= 768px) или (600px <= width < 1024px), его понимают все актуальные браузеры.

Покажите, что знаете не только ширину: (hover: hover) и (pointer: coarse) для сенсорных устройств, prefers-reduced-motion, prefers-color-scheme. Для компонентов, которые живут в колонках разной ширины, сегодня уместнее @container: карточка перестраивается по ширине родителя, а не окна. Размер шрифта часто решают вовсе без брейкпоинтов через clamp().

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

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

Смешивают min-width и max-width с одним и тем же числом. На ровно 768px совпадают оба правила, и результат решает порядок в файле.

Говорят, что mobile-first экономит трафик. Браузер скачивает весь CSS независимо от медиа-запросов, выигрыш в простоте кода, а не в байтах.