我想使用媒体查询根据div其所在元素的大小来调整元素的大小。我不能使用屏幕大小，因为div只是像网页中的小部件一样使用，它的大小可以变化。
更新资料
看起来现在正在对此进行处理：https : //github.com/ResponsiveImagesCG/cq-demos
媒体查询可以基于div元素而不是屏幕来调整大小吗？
第2886篇《媒体查询可以基于div元素而不是屏幕来调整大小吗？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点
共11个回答
我也想到了媒体查询，但后来发现：
只需创建一个<div>具有百分比值的包装器padding-bottom，如下所示：
div {
width: 100%;
padding-bottom: 75%;
background:gold; /** <-- For the demo **/
}<div></div>它将导致<div>高度等于其容器宽度的75％（长宽比为4：3）。
该技术还可以与媒体查询和有关页面布局的一些专门知识相结合，以实现更精细的控制。
足以满足我的需求。可能也足以满足您的需求。
我认为可以完全使用CSS完成您想要的事情的唯一方法是对控件使用可变容器。如果容器的宽度是屏幕的百分比，则可以使用媒体查询来根据容器的宽度设置样式，因为您现在将知道每个屏幕的尺寸是什么。例如，假设您决定使容器的屏幕宽度为50％。然后对于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 */
}
您可以使用ResizeObserver API。它仍处于早期阶段，因此尚不被所有浏览器支持（但是有一些polyfill可以帮助您）。
基本上，此API允许您将事件侦听器附加到DOM元素的调整大小。
从布局的角度来看，可以使用现代技术。
它由Heydon Pickering组成（我相信）。他在此处详细介绍了该过程：http : //www.heydonworks.com/article/the-flexbox-holy-albatross
克里斯·科耶尔（Chris Coyier）挑选了它，并在此处进行了演示：https : //css-tricks.com/putting-the-flexbox-albatross-to-real-use/
要重申的问题，下面我们看到同样的组件3，每个组成的标记三个橘的div a，b和c。
后两个块垂直显示，因为它们限制在水平空间中，而顶部组件3块水平放置。
它使用flex-basisCSS属性和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 );
}
}
Heydon的文章用1000个字详细解释了，我强烈建议您阅读。
几年前，我遇到了同样的问题，并资助了一个插件的开发以帮助我的工作。我已将该插件作为开源发布，以便其他人也可以从中受益，您可以在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 - 最大宽度
%
高度查询
- 最小高度in
px - 最小高度in
% - 最大高度
px - 最大高度
%
计数查询
- 最小字符
- 最大字符数
- 最小线
- 最大线数
- 最小的孩子
- 最大儿童
特殊选择器
在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。
iframe内部的媒体查询可以用作元素查询。我已经成功实现了。这个想法来自Zurb 最近关于响应式广告的帖子。没有JavaScript！
如@BoltClock在接受的答案中所写，当前仅靠CSS是不可能的，但是您可以使用JavaScript来解决。
我创建了一个容器查询（aka元素查询）prolyfill以解决此类问题。它的工作方式与其他脚本略有不同，因此您不必编辑元素的HTML代码。您所要做的就是包含脚本并在CSS中使用它，如下所示：
.element:container(width > 99px) {
/* If its container is at least 100px wide */
}
我刚刚创建了一个JavaScript填充程序来实现此目标。如果需要，请看一下它，这是一个概念证明，但请注意：这是一个早期版本，仍然需要一些工作。
相似问题
问题类别
对于我来说，我是通过设置div的最大宽度来做到这一点的，因此对于小窗口小部件将不受影响，并且由于最大宽度样式，将对大窗口小部件进行调整大小。