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

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