js设置HTML标签的font-size大小实现页面适配

最新推荐文章于 2025-03-01 18:03:20 发布

weixin_42802749

最新推荐文章于 2025-03-01 18:03:20 发布

阅读量5.7k

点赞数

分类专栏： JavaScript css 文章标签： JavaScript 响应式布局

本文链接：https://blog.csdn.net/weixin_42802749/article/details/101687357

版权

JavaScript 同时被 2 个专栏收录

4 篇文章

订阅专栏

css

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript动态调整HTML字体大小的方法，实现页面在不同设备上的适配。通过监听窗口大小变化，调整根元素的字体大小，确保了页面元素在各种屏幕尺寸下都能保持良好的显示效果。

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

js设置HTML标签的font-size大小实现页面适配

/*响应式布局 start*/
    function setRootFontSize() {
        var width = document.documentElement.clientWidth || document.body.clientWidth;
        if (width > 540) {
            width = 540;
        }
        fontSize = (width / 10);
        document.getElementsByTagName('html')[0].style['font-size'] = fontSize + 'px';
    }
    setRootFontSize();
    window.addEventListener('resize', function() {
        setRootFontSize();
    }, false);
    /*响应式布局 end*/