我想使用媒体查询根据他们所在的div元素的大小来调整元素的大小。我不能使用屏幕大小，因为div只是像网页中的小部件一样使用，它的大小可以变化。
当前回答
我也在考虑媒体查询，但后来我发现了这个:
http://www.mademyday.de/css-height-equals-width-with-pure-css.html 使用CSS维护div的纵横比
只需创建一个包装器<div>，并为padding-bottom设置一个百分比值，如下所示:
div { 宽度:100%; padding-bottom: 75%; 背景:黄金;/** <——用于演示**/ ｝ < div > < / div >
它将生成一个<div>，其高度等于其容器宽度的75%(4:3长宽比)。
这种技术还可以与媒体查询和一些关于页面布局的专门知识相结合，以实现更细粒度的控制。
这足够我用了。这也足够满足你的需求了。
其他回答
这是目前不可能与CSS单独写在接受的答案@BoltClock，但您可以通过使用JavaScript的工作。
我创建了一个容器查询(又名元素查询)填充来解决这类问题。它的工作方式与其他脚本略有不同，因此您不必编辑元素的HTML代码。你所要做的就是包括脚本，并在你的CSS中使用它，就像这样:
.element:container(width > 99px) {
/* If its container is at least 100px wide */
}
https://github.com/ausi/cq-prolyfill
我刚刚创建了一个javascript shim来实现这个目标。如果您愿意，可以查看一下，这是一个概念验证，但请注意:这是一个早期版本，仍然需要一些工作。
https://github.com/marcj/css-element-queries
iframe中的Media Query可以作为元素查询。我已经成功地实现了这一点。这个想法来自Zurb最近发表的一篇关于响应式广告的文章。没有Javascript !
这个问题很模糊。正如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。
我也在考虑媒体查询，但后来我发现了这个:
http://www.mademyday.de/css-height-equals-width-with-pure-css.html 使用CSS维护div的纵横比
只需创建一个包装器<div>，并为padding-bottom设置一个百分比值，如下所示:
div { 宽度:100%; padding-bottom: 75%; 背景:黄金;/** <——用于演示**/ ｝ < div > < / div >
它将生成一个<div>，其高度等于其容器宽度的75%(4:3长宽比)。
这种技术还可以与媒体查询和一些关于页面布局的专门知识相结合，以实现更细粒度的控制。
这足够我用了。这也足够满足你的需求了。
