CSSコンテナクエリは、ビューポートサイズではなくコンポーネントコンテナのサイズに基づいてスターキングを可能にする新しいレスポンシブ設(shè)計メカニズムです。使用する手順は次のとおりです。1。インラインサイズやサイズなど、コンテナタイプを介してコンテナタイプを定義します。 2.オプションでコンテナ名を使用してコンテナに名前を付けます。 3. @Containerクエリを使用して、対応するスタイルルールを書きます。適用されるシナリオには、さまざまなコンテキストで適応的に表示する必要があるカード、ツールバー、広告モジュール、およびその他のコンポーネントが含まれます。メモには、コンテナの種類の明示的な宣言、パフォーマンスへの影響、互換性の問題が含まれます?，F(xiàn)在、主流のブラウザはそれをサポートしていますが、ダウングレード処理またはプログレッシブエンハンスメント戦略を組み合わせる必要があります。

Web開発では、レスポンシブデザインは常に核となる問題の1つです。 CSSコンテナクエリの出現(xiàn)により、ビューポート全體のサイズのみに依存するのではなく、コンポーネントのコンテナサイズに基づいてスタイルを最終的に調(diào)整できます。これは、現(xiàn)代のモジュール開発のための大きな前進です。

CSSコンテナクエリとは何ですか？

CSSコンテナクエリは、コンテナのサイズ（ブラウザウィンドウ全體ではなく）に基づいて內(nèi)部要素をスタイリングできる新しいレスポンシブメカニズムです。コンポーネントを「クエリコンテナ」としてマークし、コンテナのサイズに基づいて異なるレイアウトルールを定義できます。

使用方法は非常にシンプルです。最初にcontainer-typeを使用して、 inline-sizeやsizeなどのコンテナタイプを定義し、 @containerクエリを介して対応するスタイルルールを記述します。例えば：

 .widget {
  コンテナタイプ：インラインサイズ。
}

@container（max-width：300px）{
  .widget {
    フォントサイズ：12px;
  }
}

このように、 .widgetコンテナの幅が300px以下の場合、內(nèi)部のテキストが小さくなり、より柔軟な適応性パフォーマンスを?qū)g現(xiàn)します。

コンテナをセットアップしてクエリを使用する方法は？

コンテナクエリを使用するには、まず「コンテナ」になりたい要素がどの要素であるかを明確にする必要があります。通常、カード、サイドバー、広告スロットなどのコンポーネントレベルのブロックです。

セットアップ方法は次のとおりです。

• ターゲット要素にcontainer-type屬性を追加すると、幅にのみ焦點を當てるため、 inline-sizeから始めることをお勧めします。
• 幅と高さを同時に制御する必要がある場合は、 sizeタイプを使用できますが、パフォーマンスの問題に注意してください。
• container-nameを使用してコンテナに名前を付けるため、複數(shù)のクエリで異なるコンテナを簡単に區(qū)別できます。

例：

 .card {
  コンテナタイプ：インラインサイズ。
  コンテナ名：Card-Container;
}

@container card-container（max-width：400px）{
  .card-content {
    フレックス方向：列;
  }
}

このように、複數(shù)のコンポーネントが同様の構(gòu)造を使用していても、それぞれの応答行動を個別に制御できます。

コンテナクエリの使用に適したシナリオはどれですか？

コンテナクエリは、異なるコンテキストで一貫した外観を必要とするコンポーネントに特に適しています。例えば：

• カードコンポーネント：サイドバーのコンパクトバージョンとメインコンテンツ領(lǐng)域のフルバージョンを表示します。
• ツールバーまたはボタングループ：利用可能なスペースに応じて、自動的に水平/垂直方向の配置を切り替えます。
• 広告モジュール：混雑を避けるために、小さな容器にいくつかの要素を非表示にします。

この機能により、コンポーネントは「自己認識」を真に達成し、外部ロジックの介入なしに合理的なディスプレイを作成できます。

メモと互換性

現(xiàn)在、主流のブラウザはすでにコンテナクエリをサポートしていますが、実際のプロジェクトでは、次のポイントに注意する必要があります。

• すべてのコンテナがクエリオブジェクトになるわけではなく、 container-type明示的に宣言する必要があります。
• 複雑なネスティングは、特にsizeタイプが使用される場合、パフォーマンスに影響を與える可能性があります。
• 現(xiàn)在、 @media內(nèi)に巣を作らないなど、メディアクエリ以外の他の場所で混合することはできません。

互換性が心配な場合は、処理ロジックのダウングレードをコードに追加するか、従來のメディアクエリを組み合わせて進歩的な機能強化を行うことができます。

基本的にそれだけです。コンテナクエリを使用すると、コンポーネントが「環(huán)境意識」機能を真に持つことができます。それはまだ人気の段階にありますが、UIの構(gòu)築方法を変え始めています。

以上がCSSコンテナクエリの理解と使用（新興トピック）の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。