网页使用rem前设置字体

原创于 2021-09-27 09:17:31 发布 · 507 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

rem 专栏收录该内容

1 篇文章

订阅专栏

这段代码展示了如何在JavaScript中实现REM布局以适应不同尺寸的移动端屏幕。通过监听窗口的resize事件，动态调整HTML根元素的字体大小，从而实现响应式设计。引入的rem.js文件确保了页面在不同分辨率下保持良好的视觉效果。

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

//rem.js文件
export default (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 = 20 * (clientWidth / 1200) + 'px';
        console.log(docEl.style.fontSize)
    };

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

//调用
import rem from './js/rem.js';

document.documentElement.style.fontSize = 20 * (document.documentElement.clientWidth / 1200) + 'px';
rem