web-dev-qa-db-ja.com

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

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

更新

今これが行われている作業があるように見えます： https://github.com/ResponsiveImagesCG/cq-demos

csscss3media-queries
253
Zubair

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

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

186
BoltClock

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

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

102
Marc J. Schmidt

Iframe内のメディアクエリは、要素クエリとして機能できます。私はこれをうまく実装しました。このアイデアは、Zurbによる Responsive Ads に関する最近の投稿からもたらされました。 JavaScriptがありません。

31
haddnin

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

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

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

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

22
ausi

私は数年前に同じ問題に遭遇し、私の仕事で私を助けるためにプラグインの開発に資金を供給しました。他の人も同様に恩恵を受けることができるように私はオープンソースとしてプラグインをリリースしました、そしてあなたは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を使ったレスポンシブスタイルではどのような条件がサポートされているのでしょうか。

ウェイトクエリ

  • pxname__の最小幅
  • %の最小幅
  • pxname__の最大幅
  • %の最大幅

高さクエリ

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

クエリを数える

  • 分文字
  • 最大文字数
  • 分線
  • 最大行数
  • ミニチルドレン
  • マックス - チルドレン

特別なセレクター

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

  • $this（クエリに一致する要素）
  • $parent（クエリに一致する要素の親要素）
  • $root（文書のルート要素、<html>）

要素クエリを使用すると、それぞれがレスポンシブデザインモジュールからレイアウトを構成できます。各デザインモジュールには、それらがページにどのように表示されているかが少し「自己認識」されています。

EQCSSを使えば、幅150pxから幅1000pxまで見栄えよくするように1つのウィジェットをデザインすることができ、それからあなたはどんなテンプレートを使って（どんなサイトでも）自信を持ってそのウィジェットをあらゆるページのあらゆるサイドバーにドロップできます。

13
innovati

その質問は非常に曖昧です。 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を必要とします。

9
cimmanon

あなたが純粋に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 */
}
4
Roumelis George

私はメディアの問い合わせについても考えていましたが、それから私はこれを見つけました：

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

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

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

このテクニックは、さらにきめ細かい制御を行うために、メディアクエリやページレイアウトに関するちょっとした特別な知識と組み合わせることもできます。

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

3
Hendy Irawan

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

  // assuming your widget class is "widget"
  .widget {
    max-width: 100%;
    height: auto;
  }
0
Jacky Choo