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的值