Html 与DIV大小对应的字体大小

我正在创建一个页面，在那里我有一些元素，它们可以隐藏，也可以不隐藏。我想知道是否可以根据我的div调整我的字体大小

例如，当我有2个元素显示时，我希望我的文本比我有5个元素时更大，这样我的文本会更好地适应空间

我的JavaScript代码，它定义元素是否隐藏

var val_kpi = $("#t3_teste_B_kpi").text();
var val_kpi_clean = Number(val_kpi.replace(/[^0-9.-]+/g,""));

if (val_kpi_clean != null && val_kpi_clean != 0){
    $("#t3_teste_B").css("display", "");
}else{
    $("#t3_teste_B").css("display", "none");
}

.tier3_测试{ 宽度：50%； 最小高度：100px； 高度：自动； 右边距：2.5px； /*视觉形态*/ 背景：FFF； /*博尔达构型*/ 边框：5px实心； 边界图像切片：1； /*边界半径：30px 30px 30px 30px*/ 边界图像源：左线性渐变，2B6640，66B512； } .柔性中心{ 显示器：flex； 证明内容：中心； 对齐项目：居中； } .tier3_in{ 保证金：10px 5px 10px 5px； 宽度：100%； } .kpititle3{ 字体大小：粗体； 颜色：000； 字体大小：calc8px+12-8*100vw-300px/1600-300； } .kpitext3{ 字体大小：calc10px+16-10*100vw-300px/1600-300； 字体大小：粗体； } 1.不要包装{ 空白：nowrap； } A. 勇气1

B 勇气2

C 勇气3

D 勇气4

E 勇气5

---

在javascript中，只需在包装器div.tier-3-test中添加/删除两个额外的类.big-font和.small-font中的一个，以测试其元素是否被删除。在css中，然后为额外类1定义一个字体大小，如果包装器div包含全部5，则添加该字体大小；如果包装器div包含较少的div，则为额外类2定义另一个字体大小，大致如下所示：

.big-font {
  font-size: 30px;
}

.small-font {
  font-size: 20px;
}

---

使用简单的CSS无法做到这一点

克里斯·科伊尔（Chris Coyier）擅长CSS技巧，并且都使用javascript。然而，你自己弄清楚是没有意义的——Coyier讨论了一些已经编写好的库，它们可以帮你完成这项工作

下面是使用您的代码和第一个这样的库的示例：Dave Rupert的库。单击按钮查看删除三个div时发生的情况

var grow_factor=$'.tier3_in'.length/2； $'.tier3_测试'.fitText增长系数； /*下面只是为了演示删除div*/ $“按钮”。单击功能{ $'t3_teste_C、t3_teste_D、t3_teste_E'。移除； var grow_factor=$'.tier3_in'.length/2； $'.tier3_测试'.fitText增长系数； }; .tier3_测试{ 宽度：50%； 最小高度：100px； 高度：自动； 右边距：2.5px； /*视觉形态*/ 背景：FFF； /*博尔达构型*/ 边框：5px实心； 边界图像切片：1； /*边界半径：30px 30px 30px 30px*/ 边界图像源：左线性渐变，2B6640，66B512； } .柔性中心{ 显示器：flex； 证明内容：中心； 对齐项目：居中； } .tier3_in{ 保证金：10px 5px 10px 5px； 宽度：100%； } .kpititle3{ 字体大小：粗体； 颜色：000； } 1.不要包装{ 空白：nowrap； } A. 勇气1

B 勇气2

C 勇气3

D 勇气4

E 勇气5

---

删除3个部分创建一个片段，复制您的精确图像。