Vue使用REM布局

export default {
    install() {
        var calc = () => {
            var deviceWidth = document.documentElement.clientWidth;
            // if (deviceWidth > 500) deviceWidth = 500
            // 100px = 1rem
            document.documentElement.style.fontSize = deviceWidth / 7.5 + 'px';
            document.documentElement.setAttribute('dpr', window.devicePixelRatio);
            // 解决部分rem特别大的问题  不跟随手机系统字体大小
            var docElFontSize = document.documentElement.style.fontSize.replace(/px/gi, '')
            var computedFontSize = window.getComputedStyle(document.documentElement)['font-size'].replace(/px/gi, '')
            docElFontSize != computedFontSize && (document.documentElement.style.fontSize = docElFontSize * docElFontSize / computedFontSize + 'px')
        };

        window.addEventListener('resize', calc);
        calc();
    }
};

在main.js中引入该代码

import flexiable from '@/lib/flexiable'
Vue.use(flexiable)

就可以愉快的使用啦~