412

メディアクエリを使用して、要素のサイズに基づいて要素のサイズを変更したいと思いますdiv。画面サイズはdiv、Webページ内のウィジェットのように使用され、サイズが異なる可能性があるため、使用できません。

アップデート

現在、これについて作業が行われているようです： https ://github.com/ResponsiveImagesCG/cq-demos

4

11 に答える 11

298

CSSワーキンググループは、提案、概念実証、ディスカッション、およびより広範なWeb開発者コミュニティによるその他の貢献により、10年近くの作業を経て、コンテナクエリを将来のエディションに書き込むために必要な基礎を最終的に築きました。 CSS封じ込め仕様！このような機能がどのように機能し、使用されるかについての詳細は、ミリアム・スザンヌの詳細な 説明をご覧ください。

うまくいけば、そのようなシステムの堅牢なクロスブラウザ実装が見られるまで、それほど長くはかからないでしょう。大変な待ち時間でしたが、循環依存や無限ループ、またはあなたが持っているもののために、CSSの克服できない制限として受け入れなければならないものではなくなったことを嬉しく思います（これらはまだいくつかの側面で潜在的な問題です提案された設計ですが、CSSWGが道を見つけると信じています）。

メディアクエリは、ページ内の要素に基づいて機能するようには設計されていません。これらは、デバイスまたはメディアタイプに基づいて機能するように設計されています（したがって、メディアクエリと呼ばれる理由）。width、、heightおよびその他の寸法ベースのメディア機能はすべて、画面ベースのメディアのビューポートまたはデバイスの画面のいずれかの寸法を参照します。ページ上の特定の要素を参照するために使用することはできません。

ページ上の特定の要素のサイズに応じてスタイルを適用する必要がある場合は、メディアクエリの代わりにdiv、JavaScriptを使用してその要素のサイズの変化を監視する必要があります。div

または、フレックスボックスなどのこの回答の最初の公開以降に導入された最新のレイアウト手法や、カスタムプロパティなどの標準を使用すると、メディアや要素のクエリは必要ない場合があります。Djaveが例を示しています。

于 2012-09-07T13:39:26.097 に答える
123

この目標を達成するために、JavaScriptシムを作成しました。必要に応じて確認してください。これは概念実証ですが、注意が必要です。これは初期バージョンであり、まだいくつかの作業が必要です。

https://github.com/marcj/css-element-queries

于 2013-06-02T03:29:27.493 に答える
41

iframe内のメディアクエリは、要素クエリとして機能できます。私はこれをうまく実装しました。このアイデアは、Zurbによるレスポンシブ広告に関する最近の投稿から生まれました。Javascriptはありません！

于 2014-07-16T19:25:53.797 に答える
37

レイアウトの観点からは、最新の技術を使用することが可能です。

ヘイドンピカリングによって構成されています（私は信じています）。彼はここでプロセスを詳しく説明します：http ：//www.heydonworks.com/article/the-flexbox-holy-albatross

Chris Coyierがそれをピックアップし、ここでデモを実行します：https ://css-tricks.com/putting-the-flexbox-albatross-to-real-use/

a問題を言い換えると、以下に同じコンポーネントが3つあり、それぞれが、、bおよびのラベルが付いた3つのオレンジ色のdivで構成されていcます。

次の2つのブロックは、水平方向の部屋に制限されているため、垂直方向に表示されますが、上部のコンポーネント3ブロックは水平方向に配置されます。

flex-basisCSSプロパティとCSS変数を使用してこの効果を作成します。

最後の例

.panel{
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #f00;
  $breakpoint: 600px;
  --multiplier: calc( #{$breakpoint} - 100%);
  .element{
    min-width: 33%;
    max-width: 100%;
    flex-grow: 1;
    flex-basis: calc( var(--multiplier) * 999 );
  }
}

デモ

Heydonの記事は1000語で詳細に説明されているので、読むことを強くお勧めします。

2021/22を更新

他の回答で述べたように、コンテナクエリが来ています。それには完全な仕様があり、その使用法はMDNで詳しく説明されています。

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries

そして、まだそれをサポートしていないブラウザを高速化するためのポリフィルがあります：

https://github.com/GoogleChromeLabs/container-query-polyfill

ここにそれの素敵な小さな概要ビデオがあります：

https://www.youtube.com/watch?v=gCNMyYr7F6w

于 2019-09-26T13:49:20.013 に答える
27

@BoltClockが受け入れられた回答に書いたように、これは現在CSSだけでは不可能ですが、JavaScriptを使用することで回避できます。

この種の問題を解決するために、コンテナクエリ（別名要素クエリ）prolyfillを作成しました。他のスクリプトとは少し動作が異なるため、要素のHTMLコードを編集する必要はありません。あなたがしなければならないのは、スクリプトを含めて、CSSで次のように使用することです。

.element:container(width > 99px) {
    /* If its container is at least 100px wide */
}

https://github.com/ausi/cq-prolyfill

于 2015-10-05T13:35:06.390 に答える
18

私は数年前に同じ問題に遭遇し、私の仕事に役立つプラグインの開発に資金を提供しました。プラグインをオープンソースとしてリリースしたので、他の人もプラグインの恩恵を受けることができます。Githubでプラグインを入手できます：https ：//github.com/eqcss/eqcss

ページ上の要素について知ることができることに基づいて、さまざまなレスポンシブスタイルを適用する方法がいくつかあります。EQCSSプラグインでCSSに記述できる要素クエリを次に示します。

@element 'div' and (condition) {
  $this {
    /* Do something to the 'div' that meets the condition */
  }
  .other {
    /* Also apply this CSS to .other when 'div' meets this condition */
  }
}

では、EQCSSを使用したレスポンシブスタイルではどのような条件がサポートされていますか？

体重の問い合わせ

  • 最小幅px
  • 最小幅%
  • 最大幅px
  • 最大幅%

高さクエリ

  • 最小の高さpx
  • 最小の高さ%
  • 最大高さpx
  • 最大高さ%

クエリを数える

  • 最小文字
  • 最大文字数
  • 最小行
  • max-lines
  • 最小-子供
  • max-children

スペシャルセレクター

EQCSS要素クエリ内では、スタイルをより具体的に適用できる3つの特別なセレクターを使用することもできます。

  • $this（クエリに一致する要素）
  • $parent（クエリに一致する要素の親要素）
  • $root（ドキュメントのルート要素、<html>）

要素クエリを使用すると、個別にレスポンシブなデザインモジュールからレイアウトを構成できます。各モジュールには、ページでの表示方法についての「自己認識」が少しあります。

EQCSSを使用すると、1つのウィジェットを幅150ピクセルから幅1000ピクセルまで見栄えよくするように設計できます。その後、任意のテンプレート（任意のサイト）を使用して、そのウィジェットを任意のページの任意のサイドバーに自信を持ってドロップできます。

于 2015-11-12T19:26:12.767 に答える
8

質問は非常にあいまいです。BoltClockが言うように、メディアクエリはデバイスのサイズしか知りません。ただし、メディアクエリをディセンダーセレクターと組み合わせて使用​​して、調整を実行できます。

.wide_container { width: 50em }

.narrow_container { width: 20em }

.my_element { border: 1px solid }

@media (max-width: 30em) {
    .wide_container .my_element {
        color: blue;
    }

    .narrow_container .my_element {
        color: red;
    }
}

@media (max-width: 50em) {
    .wide_container .my_element {
        color: orange;
    }

    .narrow_container .my_element {
        color: green;
    }
}

他の唯一の解決策はJSを必要とします。

于 2012-09-07T17:49:13.783 に答える
4

純粋にcssを使用して目的を達成できると私が考える唯一の方法は、ウィジェットに流動的なコンテナーを使用することです。コンテナの幅が画面のパーセンテージである場合は、メディアクエリを使用して、コンテナの幅に応じてスタイルを設定できます。これで、各画面のサイズについて、コンテナのサイズがわかります。たとえば、コンテナの画面幅を50％にすることにしたとします。次に、画面幅が1200ピクセルの場合、コンテナが600ピクセルであることがわかります。

.myContainer {
  width: 50%;
}

/* you know know that your container is 600px 
 * so you style accordingly
*/
@media (max-width: 1200px) { 
  /* your css for 600px container */
}
于 2015-06-17T09:05:29.430 に答える
3

メディアクエリについても考えていましたが、次のことがわかりました。

次のよう<div>に、のパーセンテージ値を使用してラッパーを作成するだけです。padding-bottom

div {
  width: 100%;
  padding-bottom: 75%;
  background:gold; /** <-- For the demo **/
}
<div></div>

その結果、<div>高さはコンテナの幅の75％に等しくなります（アスペクト比4：3）。

この手法は、メディアクエリや、ページレイアウトに関するアドホックな知識と組み合わせて、さらにきめ細かい制御を行うこともできます。

私のニーズにはそれで十分です。これはあなたのニーズにも十分かもしれません。

于 2017-07-30T23:46:37.387 に答える
3

ResizeObserverAPIを使用できます。それはまだ初期の段階であるため、まだすべてのブラウザーでサポートされているわけではありません（ただし、それを支援できるいくつかのポリフィルがあります）。

このAPIを使用すると、DOM要素のサイズを変更するときにイベントリスナーをアタッチできます。

デモ1-デモ2

于 2019-10-23T10:55:57.423 に答える
0

私の場合、divの最大幅を設定することでそれを行いました。したがって、小さいウィジェットの場合は影響を受けず、大きいウィジェットはmax-widthスタイルのためにサイズ変更されます。

  // assuming your widget class is "widget"
  .widget {
    max-width: 100%;
    height: auto;
  }
于 2018-01-24T08:28:14.637 に答える