实现rem的核心代码

最新推荐文章于 2023-05-15 15:00:24 发布

原创最新推荐文章于 2023-05-15 15:00:24 发布 · 724 阅读

1 ·

CC 4.0 BY-SA版权

js 同时被 2 个专栏收录

15 篇文章

订阅专栏

原理

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的响应式布局方案，通过监听窗口大小变化，动态调整页面字体大小，确保在不同设备上都能获得良好的阅读体验。

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

(function (doc, win, image_width) {
    
    var docEl = doc.documentElement, //获取html标签
        //orientationchange方向改变事件
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
            //当前设备视口宽度
        var clientWidth = docEl.clientWidth;
        if (!clientWidth) return;
        docEl.style.fontSize =  100* (clientWidth / image_width) + 'px';
    };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);

})(document, window, 750);