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

running8

于 2019-04-09 20:55:43 发布

阅读量619

点赞数

分类专栏： web js

web 同时被 2 个专栏收录

20 篇文章

订阅专栏

11 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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