1

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

但是如何根据 parentdiv等的宽度在 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 规则目前是根据screen/viewport 的宽度应用的。

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

那么如何根据表单可用的宽度而不是视口宽度本身在两组不同的 CSS 规则之间进行选择和应用呢？

4

1 回答 1

1

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

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

css (calc()) 中对数学有一些支持，但无法将它们用作条件子句。

于 2013-07-14T14:48:49.267 回答