Jquery 根据flexbox容器的高度设置字体大小

我想知道是否可以使用flexbox项目的高度设置字体大小。我有一个使用视口单位设置的flexbox容器，项目的高度由flex grow属性确定。我要做的是将字体大小设置为这些项目的高度，并在视口更改时保留这些关系

我有一个基本的想法，这在一定程度上是可行的，但我不确定如何仅隔离字母（从基线到封口高度）并将其缩放到物品容器

（垂直调整窗口大小以设置字体大小）

我愿意听取任何关于如何处理这一问题或可能遇到的任何陷阱的建议

HTML

JS

---

感谢您的帮助

如果您有

flex grow

的控制权，您可以根据容器上的高度计算

字体大小。因此，如果随着flex的增长，您有一个
1+2
，这意味着第二个将是第一个的两倍，因此我们可以将
H
高度定义为
H+2*H=容器高度=80vh
So
H=calc（80vh/3）

因此，第一个项目将具有
font-size:H
，第二个项目将具有
font-size:2*H

你也可以考虑CSS变量来更好地处理这个问题。

正文{
保证金：0；
填充：0；
字体系列：无衬线；
}
标题{
显示器：flex；
高度：5vh；
}
部分{
显示器：flex；
弯曲方向：行；
高度：95vh；
宽度：100%；
边框：1px纯红；
}
.集装箱{
显示器：flex；
弯曲方向：立柱；
--h:80vh；
高度：var（--h）；
宽度：var（--h）；
边框：1px纯蓝色；
}
.仪表{
显示器：flex；
弯曲方向：立柱；
高度：80vh；
宽度：10vh；
边框：1px纯蓝色；
}
.中心{
证明内容：中心；
对齐项目：居中；
}
.项目1{
柔性生长：1；
字体大小：calc（（var（--h）/3））；
弹性收缩：0；
弹性基础：自动；
边框：1px纯绿色；
线高：1；
}
.项目2{
字体大小：计算（（var（--h）/3）*2）；
柔性生长：2；
弹性收缩：0；
弹性基础：自动；
边框：1px纯绿色；
线高：1；
}
垂直调整窗口大小
朝觐
Hlp
Hi@Temani Afif感谢您的回复。使用calc设置字体大小是一种有趣的方法。但是，我希望保持它更灵活，能够在保持flex-grow关系的同时，仅在一个位置更改容器高度，反之亦然。但也许可以将容器高度和flex grow属性设置为单独的变量？我不太熟悉如何在css中做到这一点。另一个问题是，这不会随着视口的更改而动态更改（除非刷新页面）。我们可以保留JS吗？@NewbCake您可以使用CSS Variable（检查我的编辑）。。。顺便问一下，这是怎么不发生动态变化的？调整大小时它不会改变代码段的大小。。。顺便说一下，不再需要jS函数@Temani Afif，它可以很好地处理变量。是否可以使用变量设置flex grow？计算是否仅基于变量？通过不动态更改，我的意思是，当我更改浏览器窗口的大小时，内容不会调整大小。JS是否只能用于检测窗口大小并重新计算字体大小值？@NewbCake我回答的全部要点是它可以动态调整大小：）我很惊讶你说它不是。。。你用的是哪款浏览器？它可以在Chrome和Firefox中使用，但不能在Safari中使用……你知道为什么吗？
<section class="center">
  <div class="container">
    <div class="item1">H</div>
    <div class="item2">H</div>
  </div>
</section>

section {
  display:flex;
  flex-direction:row;
  height:95vh;
  width:100%;
  border:1px solid red;
}

.container {
  display:flex;
  flex-direction:column;
  height:80vh;
  width:80vh;
  border:1px solid blue;
}

.container_wide {
  display:flex;
  flex-direction:column;
  height:80vh;
  width:80vh;
  border:1px solid blue;
}

.center {
  justify-content:center;
  align-items:center;
}

.item1 {
  flex-grow:1;
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:.75;
}

.item2 {
  flex-grow:3;
  flex-shrink:0;
  flex-basis:auto;
  border:1px solid green;
  line-height:.75;
}

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here, resizing has "stopped"
    $(".item1").css("font-size", $(".item1").css("height"));
    $(".item2").css("font-size", $(".item2").css("height"));            
  }, 250);
});