コンテナクエリを備えた「スマート」レイアウト

現代のCSSは、長年の設計上の課題に対する革新的で簡素化されたソリューションを引き続き提供しています。 しかし、これらの進歩は、多くの場合、単なる問題解決を超えて新しい可能性をもたらします。コンテナクエリはこれを例証し、レイアウトデザインのエキサイティングな新しい道を提示します。 ただし、メディアクエリとの類似性は、独自の機能の十分な活用につながる可能性があります。

メディアクエリはレスポンシブWebデザインに貢献していましたが、固有の制限があります。 主にビューポートサイズとブラウザの初期フォントサイズ（CSSで定義されているルートフォントサイズではありません）に依存して、コンテキストの認識が欠けています。 この例を考えてみましょう：

直感的には、1120px（35REM

32px）のビューポート幅で背景色が変化すると仮定するかもしれません。 これは間違っています。メディアクエリは、メディアクエリの仕様で指定されているブラウザの

初期*フォントサイズ（通常は16px、ユーザー調整可能）のみを考慮します。 この設計の選択は、次のようなシナリオで無限のループを防ぎます

html {
  font-size: 32px;
}

body {
  background: lightsalmon;
}

@media (min-width: 35rem) {
  body {
    background: lightseagreen;
  }
}

対照的に、

コンテナクエリは、優れたインテリジェンスを提供します。 彼らはコンテナのサイズを直接評価し、ブレークポイントでの「魔法の数字」の必要性を排除します。 たとえば、より大きなサイズで3列グリッドを作成するには、メディアクエリには正確なブレークポイント計算が必要です。コンテナクエリを使用すると、最小列の幅を定義し、それに応じてレイアウトが適応します。 3つの300px列が必要な場合、900pxの容器で十分であることがわかります。 これは、ビューポート内のコンテナサイズのばらつきのため、メディアクエリでは確実に機能しません。 さらに、コンテナクエリは、（文字幅）を含む任意のユニットをサポートし、テキストコンテンツに基づいたレイアウトを可能にします。

例：

このアプローチは、コンテナクエリ内で

html {
  font-size: 16px;
}

@media (min-width: 30rem) {
  html {
    font-size: 32px;
  }
}

を使用することにより、さらに強化されます（ミリアムスザンヌが示唆しているように）：

。

ch実用的な考慮事項と回避策：

コンテナクエリには、定義されたコンテナ要素が必要です。 これには、特にグリッドまたはフレックスアイテムでは、面倒なラッピング要素が必要です。 ただし、

.grid-parent { container-type: inline-size; }

.grid {
  display: grid;
  gap: 1rem;

  @container (width > 90ch) {
    grid-template-columns: repeat(3, 1fr);
  }
}

を使用すると、メイングリッドがコンテナとして機能するようになります。

これにより、列の数に基づいてスタイリングが可能になります calc() @container (width > calc(30ch * 3))ブレークポイントのカスタムプロパティは開発者エクスペリエンスを向上させますが、現在の機能は大きな利点を提供します。

FlexBoxの考慮事項：

コンテナクエリはFlexBoxに適用できますが、フレックスアイテムのパディングと境界線はFlexBoxアルゴリズムでは考慮されず、予期しないレイアウトシフトにつながる可能性があります。 したがって、このタイプのレスポンシブレイアウトにはグリッドが優先されることがよくあります。

結論として、コンテナクエリは、メディアクエリの制限を上回り、新しい創造的な可能性を解き放ち、レスポンシブデザインに対するよりインテリジェントで柔軟なアプローチを提供します。

以上がコンテナクエリを備えた「スマート」レイアウトの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。