在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>

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