动态更改rem的值

DLY爽爽

于 2022-01-08 15:16:34 发布

阅读量742

点赞数

文章标签： javascript css 前端

本文链接：https://blog.youkuaiyun.com/DLYssMKII/article/details/122380885

版权

本文探讨如何在前端开发中利用JavaScript动态改变rem值，以实现不同分辨率下页面布局的一致性。通过设置初始的rem基准，并确保所有尺寸使用rem单位，可以确保页面在分辨率变化时保持视觉效果不变。

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

有些页面需要做到分辨率更改，但页面依然保持一致的情况，这种情况下，所有的单位都需要用rem来控制。

动态改变rem代码：

(function(doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",
        recalc = function() {
            if (docEl.clientWidth > 1600) {
                let num = docEl.clientWidth - 1600;
                docEl.style.fontSize = 100 + num/16 + "px";
            } else {
                var width = docEl.clientWidth / 16;
                docEl.style.fontSize = width + "px";
            }
        };
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener("DOMContentLoaded", recalc, false);
})(document, window);