如何根据控件宽度编写 CSS？答案

【问题标题】：How to write CSS based on control width?如何根据控件宽度编写 CSS？
【发布时间】：2012-10-20 03:57:07
【问题描述】：

我有个需求，需要根据控制当前宽度写CSS。

示例：假设我有DIV，如果我将此 div 放在侧面菜单栏中（例如，menu width="300px;"），我想将字体大小设置为 8px，如果我将此 DIV 放在主要内容区域（例如， menu width="700px;")，我要设置字体大小15px。

如何使用 CSS 实现这个场景？

我知道，我们可以用媒体查询来写这样的东西，但媒体查询是基于视口宽度，而不是父容器宽度。

【问题讨论】：

标签： css html

【解决方案1】：

利用 CSS 的 C̲ascading 部分：

.menuBar .myDiv
{
    font-size: 8px;
}
.mainContent .myDiv
{
    font-size: 15px;
}

【讨论】：

【解决方案2】：

.side-menu div{ 
 font-size:8px;}
.main-content div{ font-size:15px;}

【讨论】：