setRem原生代码

Shirley__csdn

于 2022-11-10 16:55:39 发布

阅读量188

点赞数

文章标签：前端 javascript html

本文链接：https://blog.youkuaiyun.com/Shirley__csdn/article/details/127792169

版权

本文介绍如何使用JavaScript实现setRem函数，根据屏幕尺寸调整html元素的字体大小。通过onresize事件和定时器，确保在窗口大小变化时实时调整。适合前端开发者了解响应式设计和浏览器窗口管理技巧。

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

    function setRem(){
    var ui_w = 375;
    var client_w =
    document.documentElement.clientWidth||document.body.clientWidth;
    
    client_w = client_w > 650 ? 650 : client_w;
    client_w = client_w < 250 ? 250 : client_w;

    var html_=document.getElementsByTagName('html')[0];
    html_.style.fontSize=(client_w/ui_w)*10+'px';
   }
   var timer=null;
    window.onresize=function(){
        clearTimeout(timer);
        timer=setTimeout(setRem,100);
    }
    // 页面加载fontsize直接10px
    window.onload=setRem;