コンテナ クエリは Div ディメンションに基づいて要素のサイズを動的に変更できますか?

メディア クエリは Div 要素の寸法に基づいて要素のサイズを動的に変更できますか?

メディア クエリ、デバイス画面に基づいて要素を応答的に調整するための CSS 機能ディメンションを Web ページ内の div 要素に適用する場合には制限があります。 Div はさまざまなサイズのウィジェットであり、要素のサイズを相対的に変更するには別のアプローチが必要です。

コンテナ クエリ: 答え

このニーズに応えて、CSS Workingグループは、メディア クエリの拡張である コンテナ クエリ を開発しました。コンテナ クエリを使用すると、別の要素の包含スタイルに基づいてスタイルを要素に適用できます。これは、要素が含まれる div のサイズに基づいて要素のサイズを変更できることを意味します。

コンテナ クエリの使用方法

コンテナ クエリでは、若干異なる構文が使用されます。メディアクエリから:

@container (container-name) {
  /* Styles */
}

ここで、container-name はコンテナーに割り当てられた名前です。 contains プロパティを使用して div を含む。

ブラウザのサポート

コンテナ クエリは現在、Chrome、Firefox、Edge などの最新のブラウザでサポートされています。

結論

コンテナ クエリは、次の場合に強力なソリューションを提供します。要素を含む div 要素のサイズに基づいて要素のサイズを動的に変更します。これにより、メディア クエリの制限を受けることなく、Web デザインの柔軟性と応答性が向上します。

以上がコンテナ クエリは Div ディメンションに基づいて要素のサイズを動的に変更できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。