メディアクエリは、画面ではなくdiv要素に基づいてサイズ変更できますか？

317

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

更新

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

css  media-queries 
— Yazz.com
ソース
2
この質問は短すぎて良い答えを得ることができないと思います。おそらく、あなたがやろうとしていることの例を提供できますか？jsfiddle.netを使用してあなたのアイデアをテストし、他の人があなたを助けるのを許可するでしょうか？一般に、質問する理由はないはずです。CSSを使用すると、メディアクエリがなくても目的の結果を得ることができます。フォントのパーセンテージ寸法とemを使用して、ネストされた要素を拡大縮小できます。しかし、多分私はあなたのhtmlコードとCSSの例をもっとよく理解するために見る必要があるだけですか？
— BenSwayne 2012
1
ウィジェットのサイズはどのように変化しますか？あなたのページは1024px以上のビューポートで固定幅（例では960px）ですか、それとも両方流動的ですか？それは不明確であり、知っておくと役立ちます
— FelipeAls
3
実際、私の現在のプロジェクトにも同様の状況があります。アイテムのリストは、ワイドデバイスの場合は2列のレイアウトで表示され、ナローデバイスの場合は1列のレイアウトで表示されますが、単一のアイテムは何があっても1列のレイアウトになります。リストとシングルバージョンの両方に、かなり幅が広く短い2つの要素があります。幅の広いデバイスでは、2つの要素が並べて表示されます。理想的には、幅の狭いデバイス：常に垂直、幅の広いデバイス：常に平行、その中間（1または2列に依存）：垂直または平行。フローティングは簡単なソリューションですが、幅もレイアウトに応じて変化させる必要があります。
— cimmanon 2012
1
LESSはCSSにコンパイルされるため、CSSがそれをサポートしていない場合、LESSはあなたを助けることはできません。
— jvannistelrooy 2014年
3
リンクはもうアクティブではありませんか？
— mix3d 2018

回答:

228

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

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

— ボルトクロック
ソース
メディアクエリで関数を使用して、含まれている要素からサイズを取得できる方法について聞いたことがあります。これをメディアクエリと組み合わせて要素のサイズを変更する方法はありますか？
— Yazz.com、2012
1
JSを使用して定期的に要素の幅を取得し、それに応じて反応する必要があります（定期的に= 1秒ごと、またはそれによって一部のブラウザーが遅くなります;したがって、最高速の方法が必要な場合はウィジェットのスタイルを設定するクラスを切り替えることによって）。
— FelipeAls 2012
6
これをネイティブに実現するには、@elementクエリが必要です。W3Cはのための韻/理由にいくつかの良いドキュメントがある@mediaクエリを：w3.org/TR/css3-mediaqueries/#width（このリンクは幅を議論するセクションに移動します---メディアタイプの幅ではなく、内に含まれる要素）
— ドーソン
メールで機能させる可能性はありますか？コンテナーdivが小さすぎる場合（つまり、Gmailデスクトップバージョンのメールスペースが小さすぎて2列のデザインに収まらない場合、たとえばウィンドウのサイズ変更が原因で）、モバイルスタイルをメールに適用しようとしています。
— Lev
ちなみに、@ elementクエリはcssをチューリング完全言語にします
— Nick
117

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

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

— マーク・J・シュミット
ソース
5
おかげで、私は感銘を受けました
— Yazz.com
5
これが信じられない。レスポンシブブートストラップと組み合わせて、@ mediaだけでは達成できない素晴らしいことを行っています。よくやった。
— Aku
3
あなたは私たちの命を救った
— Broda Noel
うわー、本当にいいので物事がずっと簡単になります
— kaiser
涼しい。質問があります。このプラグインが検出するフロー- min-width属性の更新が必要な要素。min-width更新が可能なcss-classリスト、マークされた要素を手動で書き込む必要がありますか？
— Alexander Goncharov、
38

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

— ハドニン
ソース
メディアクエリはiframe内で機能するため、これが最良のソリューションだと思います。
— -emfi
25

これは、@ BoltClockが受け入れられた回答に書き込んだため、CSSだけでは現在不可能ですが、JavaScriptを使用して回避できます。

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

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

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

— ausi
ソース
2
JSだらけです。目標は、CSSのみの機能を持つことです。
— グリーン
13
Prolyfills（およびpolyfills）は通常、ブラウザでまだサポートされていない機能を有効にするためにJSで記述されています。prolyfillの目的は、この機能がCSSでサポートされると廃止されることです。
— ausi
3
@ius質問では「CSSのみ」の言及はありません。どのようにしてその結論に達しましたか？
— ausi
1
あなたは除く@ius カントおそらくCSSのソリューション外側を提供するように、CSSでそれを行うには、完全に合理的です。「できません」よりはるかに良いと思いませんか;）
— ウェズリー・スミス
1
@ DelightedD0D私のコメントの後、彼は答えを変更し、私はその変更に+1を投票しました。現在の答えは、これはCSSだけでは不可能だと言っているので、私には問題ありません。
— ius
17

私は数年前に同じ問題に遭遇し、自分の仕事に役立つプラグインの開発に資金を提供しました。プラグインをオープンソースとしてリリースしたので、他の人も同様にその恩恵を受けることができ、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-children

特別なセレクター

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

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

要素クエリを使用すると、個々のレスポンシブデザインモジュールからレイアウトを作成できます。それぞれのモジュールは、ページ上での表示方法について少し自己認識しています。

EQCSSを使用すると、1つのウィジェットを150px幅から1000px幅まで見栄えよくデザインできます。その後、任意のテンプレート（任意のサイト）を使用して、任意のページの任意のサイドバーにそのウィジェットを確実にドロップできます。

— イノバティ
ソース
1
いいプロジェクトだ！私はあなたが作ったものを見てみました
— Yazz.com 2015年
@innovati要素に対してクエリを実行する方法を探しているときに、この投稿を見つけました。うまく動かないようです。私のチケットを見ていただけませんか。github.com/eqcss/eqcss/issues/96
— Andrew Newby
10

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

Heydon Pickeringによって作成された（私は信じています）。彼はここでプロセスを詳しく説明します：http : //www.heydonworks.com/article/the-flexbox-holy-albatross

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

問題を説明し直すと、同じコンポーネントが3つ表示されa、それぞれがbとのラベルが付いた3つのオレンジのdivで構成されていcます。

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

これは、使用してflex-basisこの効果を作成するために、CSSプロパティと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語で詳細に説明されているので、読むことを強くお勧めします。

— ジャベ
ソース
Heydonの記事のそのこと...見た目も魔法のように動作します！お返事ありがとうございます。
— ptyskju
2
これは、この質問に
— 出くわした
7

質問は非常にあいまいです。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を必要とします。

— Cimmanon
ソース
47
質問はまったく曖昧ではありません。実際、それは非常に良い質問です。残念ながら、それに対する良い答えはありません。
— ステパニアン
2
このアプローチを使用したひどいメンテナンス。
— Totty.js 2017
4

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

.myContainer {
  width: 50%;
}

/* you know know that your container is 600px 
 * so you style accordingly
*/
@media (max-width: 1200px) { 
  /* your css for 600px container */
}
— ルメリス・ジョージ
ソース
いいえ、画面上は見苦しく見えます。画面サイズの変更は速くなりますが、要素は画面に表示され、後で小さくなります。
— 緑
3

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

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

div {
  width: 100%;
  padding-bottom: 75%;
  background:gold; /** <-- For the demo **/
}
<div></div>
スニペットを展開

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

この手法は、さらに詳細な制御のために、メディアクエリやページレイアウトに関するちょっとした特別な知識と組み合わせることができます。

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

— ヘンディ・イラワン
ソース
2

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

基本的に、このAPIでは、DOM要素のサイズ変更にイベントリスナーをアタッチできます。

デモ1 - デモ2

— ホセ・サルガード
ソース
ドラフト仕様のポリフィルがあります。github.com/juggle/resize-observer
— Trevor Karjanis
Heydonの記事は、この実装例を提供しています。ページで「ResizeObserver」を検索：heydonworks.com/article/the-flexbox-holy-albatross
— Gabe Rogan
0

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

  // assuming your widget class is "widget"
  .widget {
    max-width: 100%;
    height: auto;
  }
— ジャッキー・チュー
ソース
質問では、ウィジェットのサイズが異なる可能性があると述べられています。コンテナが広い場合、max-widthを設定してもウィジェットのサイズは変更されません。.widgetウィジェットのdivのクラスとしての単なるサンプルです。
— Jacky Choo
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.