媒体查询可以基于div元素而不是屏幕来resize吗？
我想使用媒体查询来调整元素的大小，根据他们所在的div元素的大小。我不能使用屏幕大小，因为div只是像网页中的小部件一样使用，其大小可能会有所不同。
更新
看起来现在正在做这个工作： http : //responsiveimagescg.github.io/cq-usecases/
不，媒体查询不是基于页面中的元素devise的。 它们被devise为基于设备或媒体types （因此为什么称为媒体查询）工作。 width ， height和其他基于尺寸的媒体function都是指基于屏幕的媒体中视口或设备屏幕的尺寸。 它们不能用于引用页面上的某个元素。
如果您需要根据页面上某个div元素的大小来应用样式，则必须使用JavaScript来观察div元素大小的变化，而不是媒体查询。
我刚刚创build了一个JavaScript Shim来实现这个目标。 如果你想要看看，这是一个概念validation，但要小心：这是一个早期的版本，仍然需要一些工作。
媒体查询内部的iframe可以作为一个元素查询。 我已经成功实现了这一点。 这个想法来自Zurb的一个关于Responsive Ads的post。 没有Javascript！
@BoltClock在接受的答案中写道目前不可能单独使用CSS，但是可以使用JavaScript来解决这个问题。
我创build了一个容器查询（又名元素查询）prolyfill来解决这类问题。 它的工作原理与其他脚本有所不同，因此您不必编辑元素的HTML代码。 所有你需要做的就是包含脚本，并在你的CSS中使用它，如下所示：
.element:container(width > 99px) { /* If its container is at least 100px wide */ }
这个问题非常模糊。 正如BoltClock所说，媒体查询只知道设备的尺寸。 但是，您可以将媒体查询与下位select器结合使用来执行调整。
.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; } }
唯一的其他解决scheme需要JS。
几年前，我遇到了同样的问题，并资助了一个插件的开发，以帮助我工作。 我已经发布了插件作为开源，以便其他人也可以从中受益，你可以在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-线
- 最小的孩子
- MAX-儿童
特殊select器
在EQCSS元素查询中，您还可以使用三个特殊的select器，让您更具体地应用您的样式：
-
$this（与查询匹配的元素） -
$parent（匹配查询的元素的父元素） -
$root（文档的根元素，<html>）
元素查询允许您从单独响应的devise模块中构build布局，每个模块都具有一定的“自我意识”，以显示它们在页面上的显示方式。
使用EQCSS，您可以devise一个窗口小部件，从150px宽到1000px宽，然后您可以自信地使用任何模板（在任何网站上）将该窗口小部件放到任何页面的任何侧栏中
唯一的办法是我可以认为你完全可以用css来完成你想要的东西，就是为你的小部件使用stream体容器。 如果您的容器的宽度是屏幕的百分比，那么您可以使用媒体查询来根据容器的宽度进行样式设置，因为现在您将知道每个屏幕的尺寸是什么是您的容器的尺寸。 例如，假设您决定使您的容器的屏幕宽度的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 */ }
这工作得很好，是一个相对较小的构build（约4kb缩小） https://github.com/tysonmatanich/elementQuery
我也在想媒体查询，但后来我发现：
只需用padding-bottom的百分比值创build一个包装器<div> ，如下所示：
div { width: 100%; padding-bottom: 75%; background:gold; /** <-- For the demo **/ }
<div></div>
