setRem原生代码

最新推荐文章于 2024-06-10 15:51:10 发布

原创最新推荐文章于 2024-06-10 15:51:10 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

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

    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;