CSS - 基于窗口宽度和高度的 VH 和 VW 值的文本缩放

问：

我有一个具有宽度和高度的响应式元素，可以在保持纵横比的同时适应浏览器窗口。 在里面，我有一个带有 VH 单位（视口高度）的文本，我希望它始终适应窗口大小的调整，以便它始终保持成比例。

我的脚本在垂直缩放时工作正常，但在水平缩放时效果不佳。 你可以帮我吗？ 谢谢。

在这里你可以找到我的例子： JSFiddle 示例

[HTML全文]

<section>
  <div class="stagez" style="
        --r: 2000 / 2200;
        aspect-ratio: var(--r);
        width:min(90%, min(2200px, 90vh*(var(--r))));
    ">
    <div class="text_text">TEST</div>
  </div>
</section>

CSS的

html, body {
  height: 100%;
}

section {
  width: 100%;
  height: 100%;
  display: block;
  margin:0px;
  padding:0px;

}

.stagez {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  background: linear-gradient(30deg, red 50%, transparent 50%), chocolate;
}


.text_text {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-weight: 900;
  color: black;
  font-size: 10vh;
  line-height: 10vh;
}