Mobile-first означает написание базовых стилей для наименьшего экрана, а затем добавление сложности для больших экранов с помощью min-width медиа-запросов — вместо начала с десктопа и удаления функций для меньших экранов.
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
Почему mobile-first выигрывает: базовый CSS остаётся минимальным (мобильные устройства получают только необходимое — хорошо для производительности на слабых устройствах), и вы добавляете сложность, что проще логически, чем переопределять или удалять её. Это также соответствует тому, как контент естественно переполняется из одной колонки в несколько.
Медиа-запросы реагируют на viewport — окно браузера целиком. Но переиспользуемый компонент (например карточка) может появиться в широкой основной области или в узкой боковой панели на одной странице. Ширина viewport не может сказать вам, сколько места компонент на самом деле имеет.
.card-wrapper {
container-type: inline-size; /* declare it a query container */
}
/* style the card based on the CONTAINER's width, not the viewport */
@container (min-width: 400px) {
.card { display: grid; grid-template-columns: auto 1fr; }
}
Теперь одна и та же карточка автоматически переключается на горизонтальную раскладку всякий раз, когда её контейнер ≥400px — является ли это результатом большого экрана или потому что она находится в широкой колонке. Компонент становится по-настоящему независимым от контекста и переиспользуемым.
Mobile-first сохраняет адаптивный CSS чистым и поддерживаемым.
Container queries — это серьёзный прорыв: они позволяют компонентам реагировать на собственное доступное пространство, что ровно то, что вам нужно в архитектуре, основанной на компонентах (системы дизайна, переиспользуемые карточки/виджеты), где один и тот же компонент попадает во множество контекстов.