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

Question

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

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

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

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

Answer 1

利用 CSS 的 C̲ascading 部分：

.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 来设置它们的样式。