移动端文字动态大小封装函数

最新推荐文章于 2025-12-15 15:15:21 发布

原创最新推荐文章于 2025-12-15 15:15:21 发布 · 120 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #前端

本文介绍了一种使用JavaScript动态调整HTML根元素字体大小的方法，以实现响应式布局。具体做法是根据屏幕宽度计算出合适的字体大小，并将其应用到HTML根元素上。

function setRem() {
    var ui_w = 375;
    // 获取屏幕的宽度
    var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;
    console.log(ui_w, clientWidth);

    // 通过js动态改变html根节点字体大小
    var html_ = document.getElementsByTagName('html')[0];
    html_.style.fontSize = (clientWidth / ui_w) * 100 + 'px';
}
// window.onresize 浏览器被重置大小执行事件
window.onresize = setRem;