我想在整個屏幕上縮放h1元素，既基于屏幕的寬度，也基于元素的寬度。我該怎么做？

h1 {
      font-size: clamp(6rem, 12vw, 20rem);
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 100%;
      text-align: center;
    }

<h1>Hey</h1>

你需要一些信息來做到這一點。

你需要知道文本長度，你需要知道你正在使用的特定字體的寬高比(假設是固定寬度的字體)。

有了這些信息，你就可以進行下面的計算100 VW/(character _ count * font _ ratio)來找到你需要使用的字體大小，使當前文本充滿屏幕。

下面是一個例子，使用Roboto Mono字體，當你在綠色框中輸入文本長度時，用文本長度動態更新css變量。

function updateTextLength(element) {
  const text = element.textContent;
  element.style.setProperty("--text-length", text.length);
}

const fitElement = document.querySelector('.fit')

fitElement.addEventListener('input', function(event) {
  updateTextLength(event.currentTarget);
});


// initial setup
updateTextLength(fitElement);

@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');
* {
  box-sizing: border-box;
}

html,
body {
  padding: 0;
  margin: 0;
}

.fit {
  font-family: 'Roboto Mono', sans-serif;
  font-size: clamp( 2vw, calc(100vw / (var(--text-length) * var(--font-ratio))), 40vw);
  min-height: 1em;
  background: #bada55;
  text-align: center;
}

<h1 class="fit" style="--text-length:10;--font-ratio:0.61" contenteditable>EDITABLE TEXT</h1>