常用代码： JS方式自适应移动端字体大小

最新推荐文章于 2023-07-18 11:03:35 发布

weixin_52919803

最新推荐文章于 2023-07-18 11:03:35 发布

阅读量372

点赞数

分类专栏：常用代码文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_52919803/article/details/111818067

版权

常用代码专栏收录该内容

8 篇文章 0 订阅

订阅专栏

js方式自适应移动端字体大小

第一种

    (function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.fontSize = 48 * (clientWidth / 360) + 'px';
                console.log(clientWidth);
                console.log(docEl.style.fontSize);
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);

第二种

    (function (doc, win) {
        var docEl = doc.documentElement,
            recalc = function () {
                var Width = docEl.clientWidth;
                if (Width>750) {
                    Width=750
                };
                docEl.style.fontSize = 100 * (Width / 750) + 'px';
                console.log(Width);
                console.log(docEl.style.fontSize);
            };
        recalc()
        if (!doc.addEventListener) return;
        //屏幕的分辨率发生改变 会调用这个事件，在调用一次recalc这个方法 重新设置
        win.addEventListener("resize", recalc, false);
    })(document, window);