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

Question

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

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

如何使用CSS实现此场景？

我知道，我们可以使用媒体查询编写类似这样的内容，但媒体查询基于视口宽度，而不是父容器宽度。

Answer 1

利用CSS的级联部分：

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

Answer 2

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

Answer 3

仅当您已经知道要应用样式的div的宽度时：

input[width="50px"]
{
    font-size: 20px;
}

当您没有任何其他选项时，特别非常有用。但最好根据类和ID来设置它们的样式。