媒体查询可以基于div元素而不是屏幕来调整大小吗？

本文翻译自：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％。 Then for a screen width of 1200px you know that your container is 600px 然后对于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 */
}