vue中使用postcss-px2rem

1. npm i postcss-px2rem --save

2. 新建rem.js,动态计算font-size

//设计稿宽度1440px
(function () {
    function setRootFontSize() {
        let rem, rootWidth
        let rootHtml = document.documentElement
        //限制展现页面的最小宽度
        rootWidth = rootHtml.clientWidth < 1440 ? 1440 : rootHtml.clientWidth
        rem = rootWidth / 1440 * 100
        // 动态写入样式
        rootHtml.style.fontSize = `${rem}px`
    }
    setRootFontSize()
    window.addEventListener('resize', setRootFontSize, false)
})()

3. main.js 中引入rem.js

4. 在.postcssrc.js中增加配置

'postcss-px2rem':{'remUnit':100},//remUnit的值要和rem.js中乘以的100的值一致

5. 默认只能转换组件中style中的px，import引入的公共样式文件是无法转换的，如需转换需要在App.vue中用style link引入公共文件 <style lang="scss" link="./styles/common.scss"></style>