动态计算字体大小，适应一不换行

最新推荐文章于 2024-10-04 19:07:50 发布

转载最新推荐文章于 2024-10-04 19:07:50 发布 · 656 阅读

web 同时被 2 个专栏收录

20 篇文章

订阅专栏

11 篇文章

订阅专栏

本文介绍了一种通过计算屏幕宽度与文字宽度的比例来动态调整字体大小的方法。该方法首先获取屏幕和文字的实际宽度，然后计算出缩放比例，并将此比例应用到文字的字体大小上，实现响应式布局。

<script>
    var hdWidth = document.body.getBoundingClientRect().width;
    var textWidth = document.getElementsByClassName('hd-text')[0].offsetWidth;
    var scale = hdWidth / textWidth*.8;

    document.getElementsByClassName('hd-text')[0].style.fontSize = scale * 100 + '%';
</script>