CSSコンテナクエリを使用すると、コンポーネントはビューポートではなくコンテナサイズに基づいて変更に応答し、コンポーネント開(kāi)発における従來(lái)のメディアクエリの制限を解決できます。 container型を設(shè)定して、親要素をクエリコンテナとして定義し、インラインサイズまたは省略コンテナ：カード /インラインサイズを設(shè)定して名前を付けて名前を付けます。 @@Containerカード（Min-Width：400PX）構(gòu)文を使用して、垂直レイアウトから水平レイアウトに切り替えるために、コンテナ幅が指定された條件に到達(dá)したときにスタイルを適用します。 comsこのメカニズムにより、同じコンポーネントをグリッドレイアウト、コンポーネントライブラリ、CMSシステムに適したさまざまなコンテナに適応的に表示できます。 2024年半ばの時(shí)點(diǎn)で、Chrome 105、Safari 16.4、およびEdge 105がサポートされており、Firefox 110は実験機(jī)能を有効にする必要があります?；Q性を確認(rèn)することをお?jiǎng)幛幛筏蓼?。使用できます。コンテナと@containerを正しく使用して、真に適応的なコンテナであるレスポンシブUIコンポーネントを構(gòu)築します。

CSSコンテナクエリは、ビューポート全體ではなく、コンテナのサイズに基づいて変化に応答するコンポーネントのメカニズムです。従來(lái)のメディアクエリ（ @media ）と比較して、コンテナクエリは、再利用可能な応答性コンポーネントの構(gòu)築に適しています。

以下は、コンテナの幅に基づいてレイアウトを決定するカードコンポーネントを作成する方法を示す単純なCSSコンテナクエリの例です。

?基本的な使用例：カードレイアウトの切り替え

HTML

 <div class = "card-container">
  <div class = "card">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175393313460463.jpeg"  class="lazy"  src = "image.jpg" alt = "例picture" />
    <div class = "content">
      <h3>タイトル</h3>
      <p>これは説明的な段落です。 </p>
    </div>
  </div>
</div>

<div class = "card-container wide">
  <div class = "card">
    <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175393313460463.jpeg"  class="lazy"  src = "image.jpg" alt = "例picture" />
    <div class = "content">
      <h3>別のタイトル</h3>
      <p>このテキストは、より広い容器內(nèi)の水平レイアウトとして表示されます。 </p>
    </div>
  </div>
</div>

CSS

 / *ステップ1：コンテナを定義します（コンテナクエリを有効にするためのキー） */
.card-container {
  コンテナタイプ：インラインサイズ。 /*幅ベースのコンテナクエリを有効にする*/
}

/ *または省略構(gòu)文を使用する（推奨） */
.card-container {
  コンテナ：カード /インラインサイズ。 /*「カード」という名前のコンテナ、インライン方向の寸法を聞きます*/
}

/*デフォルトの狹いバージョン：垂直スタッキング*/
.card {
  ディスプレイ：Flex;
  フレックス方向：列;
  ボーダー：1pxソリッド#ccc;
  ボーダーラジウス：8px;
  オーバーフロー：隠し;
  フォントファミリー：sans-serif;
}

.card img {
  幅：100％;
  高さ：自動(dòng);
}

.card .content {
  パディング：16px;
}

/*コンテナ幅> = 400pxの場(chǎng)合、水平レイアウトに切り替えます*/
@containerカード（最小幅：400px）{
  .card {
    Flex-Direction：row;
    Align-Items：Center;
  }

  .card img {
    幅：50％;
    高さ：自動(dòng);
  }

  .card .content {
    パディング：20px;
  }
}

？重要なポイントを説明してください

• container-type: inline-size;
  要素がインライン方向の寸法（通常は幅）のみを聴くクエリコンテナになることを示します。

  

• container: card / inline-size;
  これは略式された構(gòu)文であり、コンテナの名前はcardであり、複數(shù)のクエリの異なるコンテナ間の區(qū)別を容易にします。

• @container card (min-width: 400px)
  內(nèi)部のスタイルは、 cardという名前のコンテナ幅が400px以上の場(chǎng)合にのみ有効になります。

  

• 畫(huà)面幅に依存しなくなりましたが、コンポーネントの親コンテナの幅 - コンポーネント開(kāi)発により適しています（サイドバーまたはメインコンテンツ領(lǐng)域の異なるパフォーマンスなど）。

？実用的なアプリケーションシナリオ

• グリッドレイアウトのカードは、列の幅に従って表示方法を自動(dòng)的に調(diào)整します
• コンポーネントライブラリで再利用できるボタングループやナビゲーションバーなどのレスポンシブパッケージ
• CMSまたはレイアウトシステムでは、同じコンポーネントが異なる領(lǐng)域で異なる形狀を取得します

??ブラウザの互換性（2024年半ばの時(shí)點(diǎn)）

サポートは良好ですが、注意を払う必要があります。

• Chrome 105?
• Firefox 110（有効なlayout.css.container-queries.enabledが必要です）??
• サファリ16.4?
• エッジ105?

使用できますか - コンテナクエリ

基本的にそれだけです。 containerと@containerを使用すると、「適応スクリーン」だけでなく、本當(dāng)に「適応容器」であるU(xiǎn)Iコンポーネントを書(shū)き込むことができます。

以上がCSSコンテナクエリの例の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。