vue 適配rem,某些手機設置了字體大小，導致錯位

1. 新建rem.js文件添加下面代碼。

// vue 使用這個版本
(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 = 50 * clientWidth / 375 + 'px';
        };
    if(!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false);
        doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

// 原生html使用這個版本
// 適配rem,某些手機設置了字體大小，導致錯位
(function(win) {
    var docEl = win.document.documentElement,
        tid;

    function refreshRem() {
        var width = docEl.getBoundingClientRect().width;
        //  750 的原型圖/100得到rem
        var rem = width / 750*100;//以750px為原稿，除以100可得各元素的rem
        docEl.style.fontSize = rem + "px";
        var actualSize = parseFloat(window.getComputedStyle(docEl)["font-size"]);
        if (actualSize !== rem) {
            var remScaled = rem / ( actualSize / rem );
            docEl.style.fontSize = remScaled + "px"
        }
   }

    function dbcRefresh() {
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 100)
    }

    win.addEventListener("resize", function() { dbcRefresh() }, false);
    win.addEventListener("pageshow", function(e) {
        if (e.persisted) { dbcRefresh() }
    }, false);
    refreshRem();
})(window);

 

2. mian.js文件引入rem.js文件。

import "./assets/js/rem.js" //rem