数回コンテナサイズのクエリが私を助けてくれたでしょう

CSSコンテナクエリテクノロジーはますます成熟しており、多くの開発者が単純な実験であっても、さまざまなプロジェクトに適用しようとしています。ブラウザのサポートは完全に人気がありませんが、一部のプロジェクトでは十分に実用的ですが、古いプロジェクトでメディアクエリを完全に置き換えるには十分ではない場合があります。

コンテナクエリは確かに非常に便利です！実際、私はいくつかの状況にあり、それを使用したいと思っていますが、ブラウザの互換性によって制限されています。その時点でコンテナクエリを使用できる場合、効果が向上します。

以下のすべてのデモは、執筆時点でChromeまたはSafariで最もよく表示されます。 Firefoxは、バージョン109でサポートを提供する予定です。

ケース1：カードグリッド

誰もがこのケースに精通しているはずですよね？これは私たちがほとんど遭遇する非常に一般的なパターンです。しかし、真実は、標準のメディアクエリの代わりにコンテナクエリを使用できる場合、それは多くの時間を節約し、より良い結果を得るということです。

1：1のアスペクト比を維持するために各カードが必要なカードグリッドを構築する必要があると仮定します：

これは見た目よりも難しいです！問題は、ビューポートの幅に基づいてコンポーネントのコンテンツをサイズ変更すると、コンポーネントがビューポートにどのように応答するか、および他の祖先コンテナがビューポートにどのように反応するかに影響を与えることです。たとえば、カードタイトルのフォントサイズを特定のインラインサイズに達したときに減少させる場合、これを行う信頼できる方法はありません。

VWユニットを使用してフォントサイズを設定できますが、コンポーネントはブラウザのビューポート幅に引き付けられます。これは、カードグリッドが同じブレークポイントを持たない他のコンテキストで使用される場合に問題を引き起こす可能性があります。

私の実際のプロジェクトでは、JavaScriptの方法を取りました：

1. サイズのイベントを聞いてください。
2. 各カードの幅を計算します。
3. カード幅に応じてインラインフォントサイズを追加します。
4. EMユニットを使用して、内部スタイルを設定します。

多くの作業のように見えますよね？しかし、これは、さまざまな画面サイズとさまざまなコンテキストで目的のスケーリングを実現するための安定したソリューションです。

CQWユニットなど、コンテナクエリユニット

を提供するため、コンテナクエリの方が優れています。学んだように、1CQWはコンテナの幅の1％に相当します。 CQIユニットもあります。これは、コンテナのインライン幅の尺度であり、CQBはコンテナブロック幅に使用されます。したがって、幅500px幅のカードコンテナがある場合、50cqWの値は250pxとして計算されます。 カードグリッドでコンテナクエリを使用できれば、

コンポーネントをコンテナに設定できます。

.card次に、

：

<code>.card { 
  container: card / size;
}</code>

の幅の10％をスケーリングするCQWユニットを使用して、パディングで内部ラッパーを設定できます。

.cardこれは、カードの端とその内容の間の間隔を一貫してスケーリングする良い方法です。メディアの問い合わせは必要ありません！

別のアイデア？ CQWユニットを内部コンテンツのフォントサイズとして使用し、EMユニットを使用して塗りつぶしを適用します。

<code>.card { 
  container: card / size;
}</code>

5CQWは任意の値です - 値を選択したばかりです。 emユニットは

フォントサイズに相対的であるため、パディングはまだ10cqwに等しくなります！ .card__inner

気づきましたか？同じ容器に設定された5CQWフォントサイズ

に比べて2EM！ EMユニットは同じ要素のフォントサイズ値に関連しているため、コンテナは私たちが慣れているとは異なります。しかし、私はすぐに、コンテナクエリユニットが最近の親（容器）に関連していることにすぐに気付きました。 たとえば、この例では、5CQWは要素の幅に基づいて拡張しません：

代わりに、コンテナとして定義された最も近い親にスケーリングします。だから私は

ラッパーをセットアップしました。 .card

ケース2：レイアウトを交互に

<code>.card__inner { 
  padding: 10cqw; 
} </code>

別のプロジェクトでは、別のカードコンポーネントも必要です。今回は、画面が小さくなったときに水平レイアウトから垂直レイアウトに移行するためのカードが必要です...そして再び水平レイアウトに戻り、垂直レイアウトに戻ります。 .card__inner

この困難な仕事をして、コンポーネントを2つの特定のビューポート範囲内でポートレートにするようにしました（新しいメディアクエリ範囲の構文への敬礼！）が、問題は、そのために設定されたメディアクエリ、およびビューポートの幅に応答する可能性のあるメディアクエリにロックされていることです。コンテンツが中断される場所を心配することなく、どんな状況でも機能するものが必要です！

コンテナクエリは、

ルールを使用しているため、この問題を簡単に解決できます。

1つのクエリ、無限に滑らか：

しかし、待ってください！注意する必要があるかもしれないいくつかの問題があります。具体的には、プロップベースの設計システムでこのようなコンテナクエリを使用することは困難です。たとえば、このコンポーネントには、外観を変更するために小道具に依存する子コンポーネントが含まれている場合があります。

@containerなぜこれが重要なのですか？カードのポートレートレイアウトには、代替スタイルが必要になる場合がありますが、CSSを使用してJavaScriptプロップを変更することはできません。したがって、必要なスタイルを繰り返すことができます。私は実際にこれと別の投稿でこれを解決する方法について議論しました。多数のスタイルにコンテナクエリを使用する必要がある場合は、メディアクエリに依存する既存の設計システムに詰め込もうとするのではなく、それらの周りに設計システム全体を構築する必要がある場合があります。

<code>.card__inner { 
  font-size: 5cqw; 
  padding: 2em;
} </code>

ケース3：SVGストローク

これは私が最近使用したもう1つの非常に一般的なパターンです。タイトルでロックされたアイコンがあるとします：

.info-card

メディアクエリがなくても、タイトルのサイズに応じてアイコンを簡単にスケーリングできます。ただし、問題は、SVGの

が薄すぎてサイズが小さいことに気付くことができず、厚すぎて大きすぎるサイズでは目立つ可能性があることです。

各アイコンインスタンスにクラスを作成して適用して、そのサイズとストローク幅を決定する必要がありました。アイコンが固定フォントサイズを使用するタイトルの横にある場合、これは問題ありませんが、常に変化する液体タイプを使用する場合はそれほど良くありません。

タイトルのフォントサイズはビューポート幅に基づいている可能性があるため、SVGアイコンをそれに応じて調整する必要があり、任意のサイズで適切に機能します。 EMユニットを使用して、タイトルのフォントサイズに比べてストローク幅を設定できます。ただし、特定のストロークサイズのセットに固執する必要がある場合、この方法は線形にスケーリングするためには機能しません。ビューポート幅でメディアクエリを使用せずに、表示される幅でメディアクエリに頼らずに特定のストローク幅値に調整することはできません。

ただし、コンテナクエリを使用する機会がある場合は、これを行います。

<code>.card { 
  container: card / size;
}</code>

これらの実装を比較し、コンテナクエリバージョンが、コンテナの幅に基づいて必要な特定の幅にSVGのストロークをキャプチャする方法を確認します。

追加コンテンツ：その他のタイプのコンテナサイズクエリ

わかりました、実際のプロジェクトで実際にこれに遭遇しませんでした。ただし、コンテナクエリに関する情報をよく見ると、コンテナサイズまたは物理サイズに関連するコンテナの他のコンテンツをクエリットできることに気付きました。

この投稿で使用してきた例は、主にクエリ幅、最大幅と最小幅、高さ、ブロックサイズ、インラインサイズです。

しかし、MDNは、クエリできる他の2つのことの概要を説明します。 1つは方向です。メディアクエリで使用しているため、非常に理にかなっています。コンテナクエリにも同じことが言えます：

<code>.card__inner { 
  padding: 10cqw; 
} </code>

もう1つはアスペクト比です、信じられないかもしれません：

<code>.card__inner { 
  font-size: 5cqw; 
  padding: 2em;
} </code>

これは、これら2つの例を実験するために使用できる編集可能なデモです。

<code>.card { 
  container: card / size; 
  container-name: card; 
  font-size: 5cqw; 
}</code>

私はまだこれら2つのために本当に良いユースケースを見つけていません。あなたがあなたのプロジェクトであなたを助けることができるアイデアやそれがあなたのプロジェクトを助けることができると感じているならば、コメントで私に知らせてください！

以上が数回コンテナサイズのクエリが私を助けてくれたでしょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。