Какой медиа-запрос используется в мобильном first подходе: min-width или max-width?
Что проверяют
Понимаете ли вы, как mobile first выражается в самом CSS, а не только на уровне лозунга. Правильный ответ: min-width. Следом просят объяснить почему, а потом спрашивают про выбор брейкпоинтов и про случаи, когда медиазапросы уже не нужны.
Как отвечать
В mobile first базовые стили вне медиазапросов пишутся для самого узкого экрана. Для широких экранов добавляются слои с min-width, которые дополняют и переопределяют базу:
.grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .grid { grid-template-columns: repeat(4, 1fr); } }Запросы идут по возрастанию, и каждый следующий побеждает предыдущий за счёт порядка в каскаде. max-width означает обратный подход, desktop first: сначала полная версия, потом её урезают для малых экранов.
Почему выбирают min-width:
- меньше работы для слабых устройств: телефону не приходится применять десктопные стили, чтобы тут же их отменить;
- прогрессивное улучшение: сложная раскладка добавляется там, где для неё есть место, а не отключается там, где его нет;
- меньше переопределений: у мобильной версии обычно одна колонка и меньше элементов, наращивать проще, чем вычитать.
Хорошо добавить современные детали. Диапазонный синтаксис @media (width >= 768px) поддерживают все актуальные браузеры. Брейкпоинты ставят по контенту, там, где ломается вёрстка, а не по моделям устройств. Для компонента, который зависит от ширины контейнера, а не окна, есть @container с container-type: inline-size. Часть задач решается вовсе без медиазапросов: clamp() для размеров шрифта, сетка с auto-fit и minmax().
Где спотыкаются
Отвечают max-width. Это сразу выдаёт путаницу между mobile first и desktop first.
Смешивают оба подхода в одном файле. Появляются пересекающиеся диапазоны и пограничная ширина, на которой срабатывают оба правила или ни одного.
Забывают <meta name="viewport" content="width=device-width, initial-scale=1">. Без неё мобильный браузер рендерит страницу шириной около 980 пикселей, и медиазапросы для узких экранов не срабатывают.