一、使用postcss-px-to-viewport

1、下载

npm install postcss-px-to-viewport --save

2、在src的同级处创建 postcss.config.js

/**
 * @Author:
 * @Date: 2020-11-13 14:49:46
 * @LastEditors:
 * @LastEditTime: 2020-11-13 14:56:09
 * @FilePath: /根目录/postcss.config.js
 * @Description: 这个是移动端 适配，把px转换为vw
 * 参考博客：https://juejin.cn/post/6844903903478153224 *
            https://blog.csdn.net/yihanzhi/article/details/107855316
 */
module.exports = {
    plugins: {
        autoprefixer: {},
        'postcss-px-to-viewport': {
            viewportWidth: 750,//设计搞宽度
            unitPrecision: 3,
            viewportUnit: 'vw',
            minPixelValue: 1,// 小于或等于`1px`不转换为视窗单位
            exclude: /(\/|\\)(node_modules)(\/|\\)/, // 设置忽略文件，用正则做目录名匹配(这个是忽略了node_modules里面的所有文件，所以当你使用了vantUI的时候，它不会给你改变VantUI的适配，VantUI的设计稿是370 的)
            mediaQuery: false  // 允许在媒体查询中转换`px`
        }
    }
}

注：这样就可以 完成移动端的适配了。

这样就可以写px了，UI设计图上的px是多少，你就写多少。

二、postcss-pxtorem加amfe-flexible

1、使用amfe-flexible

/**
* 1、npm下载：
* npm install amfe-flexible --save
* 下载完成后在main.js中引入 ：import 'amfe-flexible';
* 2、直接拷贝下面的js文件，在main.js中引入 ：import 'amfe-flexible';
* 二选其一
*/
(function flexible(window, document) {
    var docEl = document.documentElement
    var dpr = window.devicePixelRatio || 1

    // adjust body font size
    function setBodyFontSize() {
        if (document.body) {
            document.body.style.fontSize = (12 * dpr) + 'px'
        }
        else {
            document.addEventListener('DOMContentLoaded', setBodyFontSize)
        }
    }
    setBodyFontSize();

    // set 1rem = viewWidth / 10
    function setRemUnit() {
        /**  
        * 下面这块代表是把屏幕分成二十四等份
        * 这块可以自己修改（也就是屏幕宽度为1920px，分成24等份，每份80px，即就是 1rem就是80 px）
        * 1920px也就是设计稿宽度。
       */
        var rem = docEl.clientWidth / 24//这块默认是10等份
        docEl.style.fontSize = rem + 'px'
    }

    setRemUnit()

    // reset rem unit on page resize
    window.addEventListener('resize', setRemUnit)
    window.addEventListener('pageshow', function (e) {
        if (e.persisted) {
            setRemUnit()
        }
    })

    // detect 0.5px supports
    if (dpr >= 2) {
        var fakeBody = document.createElement('body')
        var testElement = document.createElement('div')
        testElement.style.border = '.5px solid transparent'
        fakeBody.appendChild(testElement)
        docEl.appendChild(fakeBody)
        if (testElement.offsetHeight === 1) {
            docEl.classList.add('hairlines')
        }
        docEl.removeChild(fakeBody)
    }
}(window, document))

2、下载postcss-pxtorem

# 这个要装5.1.1版本的
npm i postcss-pxtorem@5.1.1  --save

3、postcss-pxtorem 配置步骤

注：在vue.config.js、.postcssrc.js、postcss.config.js其中之一配置，权重从左到右降低。

1）在vue.config.js

module.exports = {
    lintOnSave: false,
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-pxtorem')({
                        // 换算基数 
                        rootValue: 37.5,
                        /**
                         * 哪些需要进行px转rem
                         * * 是全部转换
                         */
                        propList: ['*'],
                        /**
                         * 默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
                         * /(\/|\\)(node_modules)(\/|\\)/,  这个事匹配vant
                         */
                        exclude: /(node_module)/,
                        // 排除哪些开头的，如 .exclude 等等
                        selectorBlackList: ['exclude'],
                        mediaQuery: false,  //（布尔值）允许在媒体查询中转换px。
                        // 最小转换，如低于 4px的不会进行转成rem
                        minPixelValue: 4
                    })
                ]
            }
        }
    }
}

2）在.postcssrc.js或postcss.config.js中配置如下

module.exports = {
    "plugins": {
        'postcss-pxtorem': {
            rootValue: 37.5,
            propList: ['*']
        }
    }
}