質問

メディアクエリを使用して、メディアクエリにある div 要素に含まれています。として画面サイズを使用することはできません。 div は、ウェブページ内のウィジェットのように使用されるだけで、そのサイズは様々です。

更新情報

今、作業が行われているようです。 https://github.com/ResponsiveImagesCG/cq-demos

解決方法は？

ほぼ1年後に 10年 CSS Working Group は、広範なウェブ開発者コミュニティによる提案、概念実証、議論、その他の貢献を経て、ついに コンテナクエリ になります。 CSS Containment仕様の将来のバージョンに書き込まれます。 ! このような機能がどのように機能し、使用されるかの詳細については、Miriam Suzanne の 広範囲 解説書 .

このようなシステムの強固なクロスブラウザー実装が見られるようになるまで、そう長くはかからないことを祈るばかりです。このようなシステムの実装が、ブラウザ間をまたがる強固なものになるまでに、もうそれほど時間がかからないことを願っています。

メディアクエリは、ページ内の要素に基づいて動作するように設計されているわけではありません。デバイスまたは メディアタイプ (と呼ばれるのはそのためです。 メディア のクエリ)。 width , height といったディメンションベースのメディアの特徴はすべて、スクリーンベースのメディアにおけるビューポートまたはデバイスのスクリーンの寸法を参照しています。これらは、ページ上の特定の要素を参照するために使用することはできません。

のサイズに応じてスタイルを適用する必要がある場合は、そのサイズに対応したスタイルを適用します。 div 要素の大きさが変わると、JavaScript を使って、その div 要素を使用することで、メディアクエリの代わりに

あるいは、この回答が発表された後に導入されたフレックスボックスなどの最新のレイアウト技術や、カスタムプロパティなどの標準があれば、メディアクエリや要素クエリは必要なくなるかもしれません。 Djaveが例を示しています。