【发布时间】：2013-07-12 11:31:39
【问题描述】：
我知道@media可以用来检测整个视口的属性，然后根据不同类型的媒体/宽度等在CSS规则集之间切换..
但是如何根据父div等的宽度在CSS规则之间切换呢？
此代码预览显示了我页面的页脚，其中一些元素已更改/删除：
Liveweave： http://liveweave.com/JtUxpF （从顶部菜单切换到Split V或查看模式）
在页脚的右侧，有一个小表格（上图中用红色箭头标记）。此表单应用了@media 分隔符，如下所示：
@media all and (min-width: 270px) {
/* Apply first set of CSS rules */
}
@media not all and (min-width: 270px) {
/* Apply second set of CSS rules */
}
问题：
我的想法是基于父级div的表单可用宽度实际应用 CSS 规则。然而，CSS 规则目前是根据屏幕/视口的宽度应用的。
如果您将窗口的宽度减小到 270 像素以下，您会看到表单外观的视觉变化！
那么如何根据表单可用的宽度而不是视口宽度本身在两组不同的 CSS 规则之间进行选择和应用？
【问题讨论】：
-
我想不出纯 css 的单一方式。你试图应用什么规则，为什么？也许还有其他方法可以解决这个问题。
-
我也想让页脚在宽度较小的设备（手持设备等）上正确显示，所以我想为此表单创建不同的规则。当然，这可以使用
@media来完成，但是@media会读取整个屏幕的宽度，而我想根据表单的可用宽度与父级div分开CSS 规则。例如，屏幕宽度可以是 750 像素，但每个页脚列占其中的 33%，所以表单可用的宽度是 250 像素，而不是 750。由于 250 小于 270（这是我的阈值），我想要CSS要改变.. -
但这是可以预见的，不是吗？如果表单始终是视口宽度的 33%，那么您可以保证视口阈值为 810（ish）。
-
是的，你就在那里，但 33% 的硬编码只是暂时的。将来会发生变化，所以我想这个问题仍然有效..另外，我认为知道如何解决这样的问题会很有趣..
标签： css cross-browser media-queries