如何CSS规则集之间，根据现有的父宽度（不视口宽度）切换？(How to switch betwee

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

但是，如何基于CSS规则之间的一个交换机上父母的宽度div等？

此代码预览显示我的页面的页脚，有一些元素改变/删除：

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 */
}

问题：

我的想法是基于可从父窗体宽度实际应用CSS规则div 。 然而，CSS规则基于在屏幕/视口的宽度当前应用。

如果您减少窗口宽度小于270个像素，你会看到在窗体的外观的视觉变化！

所以，我怎么可以选择和两套不同的CSS规则之间适用的基础上，提供给表格的宽度，而不是视口宽度本身？

Answer 1:

在纯CSS不可能的。 的等价物“如果”在CSS语句目前仅限于媒体查询和选择，这两者都不得到你所需要的。 您可以使用类似小于或青菜做你想做什么，或者你可以动态生成使用服务器端或JavaScript方式的规则。

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

有一个在CSS的数学一定的支持（计算值（）），但没有使用那些有条件条款的能力。

文章来源: How to switch between CSS rule sets, based on available parent width (not viewport width)?