我想使用媒体查询根据他们所在的div元素的大小来调整元素的大小。我不能使用屏幕大小，因为div只是像网页中的小部件一样使用，它的大小可以变化。
当前回答
这个问题很模糊。正如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。
其他回答
是的，CSS容器查询就是你要找的。CSS遏制模块是详细说明此特性的规范。
你可以在这里阅读更多关于这十年工作的内容，包括提案、概念验证、讨论和更广泛的web开发人员社区的其他贡献!有关这样一个功能如何工作和使用的更多细节，请查看Miriam Suzanne的详细解释。
Currently only Chromium 105+ supports Container queries out of the box, though Safari 16 will include support as well. Hopefully it won't be much longer before we see a robust cross-browser implementation of such a system. It's been a grueling wait, but I'm glad that it's no longer something we simply have to accept as an insurmountable limitation of CSS due to cyclic dependencies or infinite loops or what have you (these are still a potential issue in some aspects of the proposed design, but I have faith that the CSSWG will find a way).
媒体查询并不是基于页面中的元素设计的。它们被设计为基于设备或媒体类型工作(因此它们被称为媒体查询)。在基于屏幕的媒体中，宽度、高度和其他基于尺寸的媒体功能都是指视口或设备屏幕的尺寸。它们不能用于指代页面上的某个元素。
如果您需要根据页面上某个div元素的大小应用样式，则必须使用JavaScript来观察该div元素大小的变化，而不是使用媒体查询。
或者，在最初发布这个答案之后引入了更现代的布局技术(如flexbox)和标准(如自定义属性)，您可能根本不需要媒体或元素查询。Djave提供了一个例子。
您可以使用ResizeObserver API。它还处于早期阶段，所以还不是所有的浏览器都支持它(但有一些填充程序可以帮助你做到这一点)。
这个API允许您在调整DOM元素大小时附加一个事件侦听器。
演示1 -演示2
iframe中的Media Query可以作为元素查询。我已经成功地实现了这一点。这个想法来自Zurb最近发表的一篇关于响应式广告的文章。没有Javascript !
几年前我遇到了同样的问题，并资助了一个插件的开发来帮助我的工作。我已经发布了开源插件，所以其他人也可以从中受益，你可以在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宽，然后您可以放心地将该小部件放到任何页面的任何侧栏中，使用任何模板(在任何网站上)
这个问题很模糊。正如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。
