适配移动端，更改html字体大小(适用rem单位)

适配移动端字体调整

最新推荐文章于 2024-04-30 11:26:03 发布

原创最新推荐文章于 2024-04-30 11:26:03 发布 · 254 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html

本文介绍了一种通过JavaScript实现的动态调整HTML字体大小的方法，确保网页在不同尺寸的移动设备上都能保持良好的阅读体验。

适配移动端，更改html字体大小

 (function(doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function() {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                docEl.style.setProperty('font-size', (clientWidth / 10) + 'px', 'important');
            };
        if (!doc.addEventListener) {
            return
        };
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);