rem布局html的font-size

最新推荐文章于 2025-02-27 09:58:12 发布

youlinaixu

最新推荐文章于 2025-02-27 09:58:12 发布

阅读量1.9k

点赞数

分类专栏： js vue 文章标签： rem布局 js实现html的fontsize

本文链接：https://blog.youkuaiyun.com/youlinaixu/article/details/95359413

版权

vue 同时被 2 个专栏收录

10 篇文章

订阅专栏

5 篇文章

订阅专栏

博客主要围绕rem布局以及用JS实现HTML字体大小设置展开，rem布局在前端页面适配等方面有重要作用，通过JS动态设置HTML的font - size能更好地实现页面的响应式设计。

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

(function(doc, win) {
    var docEl = doc.documentElement,
    // 判断window中是否有orientationchange方法
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            //设置基础html的fontsize
            docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
            console.log(docEl.style.fontSize, 'docEl.style.fontSize');
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);