动态设置font-size

来到三边坡，努力就发财

于 2024-09-12 08:20:39 发布

阅读量84

点赞数 1

分类专栏： css 文章标签： javascript 前端 chrome

本文链接：https://blog.csdn.net/weixin_45580774/article/details/142160481

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

在项目中可能会用到rem做响应式，这里在html文件中全局设置一个动态的font_size,在需要响应式的页面设置rem单位即可

(function (doc, win) {
        var docEL = document.documentElement,
          resizeEvt =
            "orientationchange" in window ? "orientationchange" : "resize",
          recalc = function () {
            // 获取当前设备的宽度
            var clientWidth = docEL.clientWidth;
            if (!clientWidth) return;
            const scalc = clientWidth / 1920;
            docEL.style.fontSize = scalc * 100 + "px";
          };
        if (!doc.addEventListener) return;
        //添加窗口变动监听
        win.addEventListener(resizeEvt, recalc, false);
        //dom加载的时候执行一次
        doc.addEventListener("DOMContentLoaded", recalc, false);
      })(document, window);