rem.js

最新推荐文章于 2024-10-24 21:03:37 发布

郅菇凉

最新推荐文章于 2024-10-24 21:03:37 发布

阅读量511

点赞数

文章标签：前端 vue.js javascript

本文链接：https://blog.youkuaiyun.com/qq_24612793/article/details/121562339

版权

本文介绍了一段JavaScript代码，用于根据浏览器窗口尺寸动态调整页面字体大小，确保在不同设备上提供良好的用户体验。通过监测窗口大小变化，当屏幕宽度达到或超过750px时，字体设置为100px，否则按比例缩放。

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

(function (doc, win) {
        var docEl = doc.documentElement,
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                var clientWidth = docEl.clientWidth;
                if (!clientWidth) return;
                // 这里的750 取决于设计稿的宽度
                if (clientWidth >= 750) {
                    docEl.style.fontSize = '100px';
                } else {
                    docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
                }
            };
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);