我想使用媒体查询根据他们所在的div元素的大小来调整元素的大小。我不能使用屏幕大小，因为div只是像网页中的小部件一样使用，它的大小可以变化。
当前回答
iframe中的Media Query可以作为元素查询。我已经成功地实现了这一点。这个想法来自Zurb最近发表的一篇关于响应式广告的文章。没有Javascript !
其他回答
iframe中的Media Query可以作为元素查询。我已经成功地实现了这一点。这个想法来自Zurb最近发表的一篇关于响应式广告的文章。没有Javascript !
您可以使用ResizeObserver API。它还处于早期阶段，所以还不是所有的浏览器都支持它(但有一些填充程序可以帮助你做到这一点)。
这个API允许您在调整DOM元素大小时附加一个事件侦听器。
演示1 -演示2
几年前我遇到了同样的问题，并资助了一个插件的开发来帮助我的工作。我已经发布了开源插件，所以其他人也可以从中受益，你可以在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完成你想要的唯一方法，就是为你的小部件使用流体容器。如果你的容器的宽度是屏幕的一个百分比，那么你可以根据你的容器的宽度使用媒体查询来设置样式，现在你会知道每个屏幕的尺寸是你的容器的尺寸。例如，假设你决定将容器的宽度设置为屏幕宽度的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 */
}
这个问题很模糊。正如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。
