如何根据可用的父宽度（不是视口宽度）在CSS规则集之间切换？

Question

我知道@media可用于检测整个视口的属性，然后根据不同类型的媒体/宽度等在CSS规则集之间切换。

但是如何根据父div等的宽度在CSS规则之间切换？

此代码预览显示我的页面的页脚，其中一些元素已更改/删除：

Liveweave： http://liveweave.com/JtUxpF （从顶部菜单切换到拆分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规则呢？

Answer 1

纯css不可能。 css中“if”语句的等价物目前仅限于媒体查询和选择器，它们都不能满足您的需求。您可以使用less或sass之类的东西来做你想做的事情，或者你可以使用服务器端或javascript方法动态生成规则。

sass：http://sass-lang.com/ 少：http://lesscss.org

在css（calc（））中有一些数学支持，但没有能力将它们用作条件子句。