モバイルファーストとは、最小の画面向けに基本スタイルを記述してから、min-widthメディアクエリで大きい画面向けに複雑さを追加するアプローチです。デスクトップから始めて機能を削ぎ落とすのではなく、その逆を行います。
モバイルファーストの実践
css
{ : grid; : ; }
(: ) {
{ : fr fr; }
}
(: ) {
{ : fr fr fr; }
}
モバイルファーストが有効な理由： 基本的なCSSは最小限に保たれ（モバイルは必要なもののみを取得 — 低スペック端末での性能が向上）、複雑さをレイヤーで追加するため、オーバーライドや削除を考えるより理解しやすいのです。また、コンテンツが自然に1列から複数列に流れ直すという流れと一致しています。
メディアクエリはウィンドウ全体であるビューポートに応答します。ただしカード型の再利用可能なコンポーネントは、同じページ内で広いメインエリアまたは狭いサイドバーの両方に表示される可能性があります。ビューポートの幅では、コンポーネント自身に実際にどれだけのスペースがあるのか知ることができません。
.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になるたびに自動的に水平レイアウトに切り替わります。このコンポーネントは真に文脈に依存しない再利用可能なものになります。
モバイルファーストは、レスポンシブCSSをシンプルで保守しやすい状態に保ちます。
コンテナクエリは大きな進歩です。コンポーネントが自身の利用可能なスペースに応答できるようになります。これはコンポーネントベースのアーキテクチャ（デザインシステム、再利用可能なカード/ウィジェット）において、同じコンポーネントが様々な環境に配置される場合には全く欠かせない機能です。