vue移動端適配rem

移動瀏覽器兼容

<meta name="viewport" content="width=device-width",initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0>

引入js文件

(function(win) {
        var docEl = win.document.documentElement;
        var time;

        function refreshRem() {
                var width = docEl.getBoundingClientRect().width;
                if (width > 768) { // 最大寬度
                        width = 768;
                }
                var rem = width / 320*50;
                docEl.style.fontSize = rem + 'px';
                ///rem用font-size:50px來進行換算

        }

        win.addEventListener('resize', function() {
                clearTimeout(time);
                time = setTimeout(refreshRem, 1);
        }, false);
        win.addEventListener('pageshow', function(e) {
                if (e.persisted) {
                        clearTimeout(time);
                        time = setTimeout(refreshRem, 1);
                }
        }, false);
        //當屏幕尺寸發生改變的時候  當頁面重新加載的時候 都重新計算一下rem的值

        refreshRem();

})(window);

假設一下psd是640，那么在js里面width就要改為320，量出來的寬高直接除以100就是rem的值