Can media queries resize based on a div element instead of the screen?
I would like to use media queries to resize elements based on the size of a div element they are in. I cannot use the screen size as the div is just used like a widget within the webpage, and its size can vary. メディアクエリを使用して、エレメントが存在するdivエレメントのサイズに合わせてエレメントのサイズを調整したいと思います.画面の大きさは使えません.divページのウィジェットのように使うだけで、大きさは変えることができます.

Update更新資料

Looks like there is work being done on this now: https://github.com/ResponsiveImagesCG/cq-demos今処理中のようです:https://github.com/ResponsiveImagesCG/cq-demos

1階

参照先:https://stackoom.com/question/PpeS/メディアクエリは、画面ではなくdiv要素に基づいてサイズを調整できますか?

2階

No, media queries aren't designed to work based on elements in a page. いいえ、メディアクエリは、ページ内の要素に基づいて動作することを目的としていません.They are designed to work based on devices or media types (hence why they are called media queries). これらは、デバイスまたはメディアタイプに基づいて動作するように設計されています(したがって、メディアクエリーと呼ばれます).width , height , and other dimension-based media features all refer to the dimensions of either the viewport or the device's screen in screen-based media. width,heightその他サイズベースのメディア機能は、いずれも画面ベースのメディアにおけるビューポートまたはデバイス画面のサイズを指す.They cannot be used to refer to a certain element on a page. ページ上の要素を参照するために使用できません.
If you need to apply styles depending on the size of a certain div element on your page, you'll have to use JavaScript to observe changes in the size of that div element instead of media queries. ページ上のdiv要素のサイズに合わせてスタイルを適用する必要がある場合は、メディアクエリではなくJavaScriptを使用して、div要素のサイズの変化を観察する必要があります.

#3階

The question is very vague. この問題はあいまいだ.As BoltClock says, media queries only know the dimensions of the device. BoltClockが言ったように、メディアクエリはデバイスのサイズしか知らない.However, you can use media queries in combination with descender selectors to perform adjustments. ただし、メディアクエリーをドロップダウンセレクタと組み合わせて使用して調整を実行できます.

.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;
    }
}

The only other solution requires JS. 他の唯一のソリューションはJSが必要です.

#4階

I've just created a javascript shim to achieve this goal. この目標を達成するためにJavaScriptフィラーを作成したばかりです.Take a look if you want, it's a proof-of-concept, but take care: it's a early version and still needs some work. 必要に応じて、これは概念証明ですが、これは初期バージョンであり、まだいくつかの作業が必要であることに注意してください.
https://github.com/marcj/css-element-queries https://github.com/marcj/css-element-queries

#5階

A Media Query inside of an iframe can function as an element query. iframe内部のメディアクエリーは、要素クエリーとして使用できます.I've successfully implement this. 私はもう成功した.The idea came from a recent post about Responsive Ads by Zurb. このアイデアはZurbの最近のレスポンス広告に関する投稿から来ています.No Javascript! JavaScriptはありません!

#6階

The only way I can think that you can accomplish what you want purely with css, is to use a fluid container for your widget. CSSで目的を完全に達成できる唯一の方法は、ウィンドウウィジェットにスムーズなコンテナを使用することだと思います.If your container's width is a percentage of the screen then you can use media queries to style depending on your container's width, as you will now know for each screen's dimensions what is your container's dimensions. コンテナの幅が画面のパーセントである場合は、メディアクエリーを使用してコンテナの幅に基づいてスタイルを設定できます.各画面のサイズがわかります.For example, let's say you decide to make your container's 50% of the screen width. たとえば、コンテナの画面幅を50%にするとします.1200 pxのスクリーン幅で600 pxの容器を知っています

.myContainer {
  width: 50%;
}

/* you know know that your container is 600px 
 * so you style accordingly
*/
@media (max-width: 1200px) { 
  /* your css for 600px container */
}