移动端适配方案:js实现动态改变根元素的字体大小

通过js动态获取屏幕的宽度(document.clientWidth)然后根据屏幕宽度动态计算出rem的实际值。

假设,640px的设备 1rem = 100px
公式: rem = document.clientWidth / 640 * 100px;

!(function(doc, win) {
    var docEle = doc.documentElement,
        evt = "onorientationchange" in window ? "orientationchange" : "resize",
        fn = function() {
            var width = docEle.clientWidth;
            width = width < 320 ? 320 : width;
            width = width > 640 ? 640 : width;
            width && (docEle.style.fontSize = 100 * (width / 640) + "px");
        };
     
    win.addEventListener(evt, fn, false);
    doc.addEventListener("DOMContentLoaded", fn, false);
 
}(document, window));

你可能感兴趣的:(移动端适配方案:js实现动态改变根元素的字体大小)