vue3实现自适应

需要用到的插件

npm i postcss-pxtorem -S
npm i lib-flexible-computer -S

使用步骤

1.在main.js中

import "lib-flexible-computer";

2.新建postcss.config.js文件：

const autoprefixer = require('autoprefixer');
const px2rem = require('postcss-pxtorem');

module.exports = {
 	plugins: [autoprefixer(), px2rem({ rootValue: 75, unitPrecision: 5, propList: ['*'] })],
};

注意

1.不会对行样式中的px进行转换
2.如果使用了vant4组件，vant组件受到postcss-pxtorem插件的影响怎么办
在postcss.config.js文件中：

const autoprefixer = require('autoprefixer');
const px2rem = require('postcss-pxtorem');

module.exports = ({ file }) => {
    let rootValue
    //网络上有很多写法是：
    //const designWidth = webpack.resourcePath.includes(path.join('node_modules', 'vant')) ? 375 : 750;
    //可能是插件接口调整了，webpack.resourcePath访问不到resourcePath属性值，修正为直接读取{ file }.file就可以读取到了，
    //否则designWidth 取不到375，都是750,界面就不会缩放
    let filename = { file }.file;
    if (filename && filename.indexOf("vant") > -1) {
        rootValue = 37.5;
    } else {
        rootValue = 75;
    }
    return {
        plugins: [
            autoprefixer(),
            px2rem({
                rootValue: rootValue,
                propList: ['*'],
                minPixelValue: 2,
                selectorBlackList: [], // 要忽略的选择器并保留为px。
            })
        ]
    }
}