CSS - 根据窗口的宽度和高度使用 VH 和 VW 值进行文本缩放

Question

我有一个响应式元素，其宽度和高度可以适应浏览器窗口，同时保持纵横比。 在里面我有一个带有 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;
}

Answer 1

我认为你可以将字体大小更改为

vmin

，这将在比较窗口的宽度和高度后根据较小的长度更改字体大小

font-size: 10vmin;
line-height: 1;