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

Question

这是我的 CSS 代码:

#my_div {
    display: grid;
    grid-template-rows: 30px;
    grid-template-columns:1fr ;
    grid-gap: 0.2rem;
    grid-auto-flow: column;
    padding-bottom: 2em;
    padding-left: 2em;
}

这是一个 30 像素高的行，其中元素(所有 JQuery UI 小部件)排列并水平流动。

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

我的解决方法如下:

#my_div label {
    font-size: 14px; /* Or whatever smaller value makes everything fit */
}

#my_div .ui-widget {
    font-size: 14px; /* Or whatever smaller value makes everything fit */
}

有没有办法自动调整该尺寸，而不必手动调整？

Answer 1

尝试在 % 中设置字体大小，例如

@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%;
      }
    }

等等。