我想使用媒体查询根据他们所在的div元素的大小来调整元素的大小。我不能使用屏幕大小，因为div只是像网页中的小部件一样使用，它的大小可以变化。
当前回答
几年前我遇到了同样的问题，并资助了一个插件的开发来帮助我的工作。我已经发布了开源插件，所以其他人也可以从中受益，你可以在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-height 最大高度%
统计查询
min-characters max-characters min-lines max-lines min-children max-children
特别的选择器
在EQCSS元素查询中，你还可以使用三个特殊的选择器，让你更具体地应用你的样式:
$this(匹配查询的元素) $parent(匹配查询的元素的父元素) $root(文档的根元素，<html>)
元素查询允许你用独立的响应式设计模块组合布局，每个模块都有一点“自我意识”，知道它们在页面上是如何显示的。
使用EQCSS，您可以设计一个小部件，从150px宽一直到1000px宽，然后您可以放心地将该小部件放到任何页面的任何侧栏中，使用任何模板(在任何网站上)
其他回答
这是目前不可能与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
对于我来说，我通过设置div的最大宽度来做到这一点，因此对于小部件不会受到影响，而大部件由于max-width样式而调整大小。
// assuming your widget class is "widget"
.widget {
max-width: 100%;
height: auto;
}
我也在考虑媒体查询，但后来我发现了这个:
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长宽比)。
这种技术还可以与媒体查询和一些关于页面布局的专门知识相结合，以实现更细粒度的控制。
这足够我用了。这也足够满足你的需求了。
从布局的角度来看，使用现代技术是可能的。
这是海顿·皮克林编的(我相信)。他详细介绍了这个过程:http://www.heydonworks.com/article/the-flexbox-holy-albatross
克里斯·科伊尔(Chris coyer)拿起它，并在这里进行了演示:https://css-tricks.com/putting-the-flexbox-albatross-to-real-use/
为了重申这个问题，下面我们看到三个相同的组件，每个组件由三个橙色div组成，分别标记为a, b和c。
后两个方块垂直显示，因为它们在水平空间上受到限制，而顶部的三个方块则水平布局。
它使用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 );
}
}
Demo
Heydon的文章有1000字详细地解释了它，我强烈推荐阅读它。
更新2021/22
正如在其他回答中提到的，容器查询即将到来。它有一个完整的规范，它的用法在MDN上有详细说明:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Container_Queries
还有一种填充方法可以让还不支持它的浏览器跟上速度:
https://github.com/GoogleChromeLabs/container-query-polyfill
这里有一个很好的概述视频:
https://www.youtube.com/watch?v=gCNMyYr7F6w
现在Chrome已经发布(2022年9月5日)
https://caniuse.com/css-container-queries
