在JavaScript / HTML中，动态计算调整文字大小 - 详解

JavaScript 动态计算

<div class="container">
<p class="text">自适应文字</p>
</div>
<script>
  const container = document.querySelector('.container');
  const text = document.querySelector('.text');
  // 动态调整字体大小
  function adjustFontSize() {
  const containerWidth = container.offsetWidth;
  text.style.fontSize = `${containerWidth / 20}px`; // 按容器宽度比例调整
  }
  // 初始化及监听窗口变化
  adjustFontSize();
  window.addEventListener('resize', adjustFontSize);
  // 可选：使用 ResizeObserver 监听容器变化
  const observer = new ResizeObserver(adjustFontSize);
  observer.observe(container);
</script>

优点：完全动态控制
缺点：需编写脚本，性能略低