0

私が実現したいのは、親コンテナーの幅に相対的な適応型の内部コンテンツ レイアウトです。特定のコンテナー幅ではなく画面幅を参照するため、CSS メディア クエリを使用するオプションがあるかどうかはよくわかりません。同じコードで、ラップされているコンテナーに応じて、2、3、または 4 列のサムネイルのセットを表示する必要があります。

cssを手動で操作するのではなく、「自動化された」方法を探しています。言い換えれば、それが理にかなっていれば、max-"device-width" の代わりに "max-parent-container-width" を使用する "レスポンシブ レイアウト" です。

これに対する解決策はありますか？

4

3 に答える 3

0

これは (IMO) メディア クエリの API サーフェスと 1:1 のパリティを提供するより良いソリューションですが、個々の要素に限定されています: http://www.backalleycoder.com/2014/04/18/element-queries-from- the-feet-up/ (スクリプトとデモが含まれています)。使用する構文/アプローチは少し異なりますが、完全に動的であるため、スタイルやクエリ ルールを変更するときにメソッドを呼び出す必要はなく、メディア クエリで実行できることはすべてカバーされます。

小さな 100 の LOC スクリプトを含めたら、次を使用して要素のスタイルを設定できます。

HTML

<section media="query(small, (max-width: 300px) and (max-height: 300px))">

  <ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
  </ul>

</section>

CSS

section[matched-media~="small"] {
  font-size: 50%; /* small text for a wee lil element! */
}

/* Multiple matches example: */

section[matched-media~="small skinny"] {
  ...
}

宣言を任意の要素query()のmedia=""属性に配置すると、クエリが一致すると、スクリプトによってmatched-media=""要素の属性に追加されます。ページのライフサイクル中いつでも(単純に を使用してsetAttribute('media', ...)) 新しい要素にクエリを追加でき、JS を呼び出す必要はありません。すべての属性解析とクエリ マッチングは非同期で自動です! 上記の記事で、ソリューションの仕組みに関するより詳細な説明を確認してください。これには、デモと、スクリプトの 2 つのバージョンを含むリポジトリが含まれています。

于 2014-04-25T15:04:41.230 に答える