Html 根据网格中的元素数自动调整css中的文本大小

以下是我的css代码：

#我的分区{
显示：网格；
网格模板行：30px；
网格模板列：1fr；
网格间距：0.2rem；
网格自动流：列；
垫底：2米；
左：2米；
}

这是一个30px高的行，其中元素（所有元素都是

jqueryui

widgets）排列在一起并水平流动

当我有“太多”元素时，它们就会溢出。我希望他们缩小尺寸，以适应新环境

我的解决办法如下：

#我的div标签{
字体大小：14px；/*或任何较小的值使所有内容都适合*/
}
#my_div.ui小部件{
字体大小：14px；/*或任何较小的值使所有内容都适合*/
}

---

有没有一种方法可以自动调整字体大小，而不必手动调整？

尝试在

%

中设置字体大小

@media only screen and (max-width: 1023px) {
  #my_div label {
    font-size: 100%;
  }
}
@media only screen and (max-width: 767px) {
      #my_div label {
        font-size: 50%;
      }
    }

---

等等。

简单地说，没有。你可以根据窗口宽度来做，但要根据div中的元素数量来做，你需要编写一些复杂的javascript，根据div中的子元素数量应用不同的字体大小