vue中实现移动端viewport完美适配vant

本篇说明使用viewport做适配的步骤，rem适配请看vue中实现移动端viewport完美适配vant。

移动端项目主要是根据屏幕大小来动态设置元素的尺寸，需要在项目中安装两个模块：postcss-px-to-viewport。

vant组件官方说明：https://vant-contrib.gitee.io/vant/#/zh-CN/advanced-usage

模块说明：

• postcss-px-to-viewport 是一款 PostCSS 插件，用于将 px 单位转化为 vw/vh 单位

1、安装命令：

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

2、设置postcss

 修改根目录下的 .postcssrc.js 文件（如果没有这个文件，可以手动添加一份）

const path = require("path");

module.exports = ({ file }) => {
    const width = file.dirname.includes(path.join('node_modules',  'vant')) ? 375 : 750;

    return {
        plugins: {
            autoprefixer: {},
            "postcss-px-to-viewport": {
                 unitToConvert: 'px',
                 viewportWidth: width,
                 unitPrecision: 3,
                 propList: ['*'],
                 viewportUnit: 'vw',
                 fontViewportUnit: 'vw',
                 selectorBlackList: [],
                 minPixelValue: 1,
                 mediaQuery: false,
                 replace: true,
                 exclude: [],
                 landscape: false,
                 landscapeUnit: 'vw',
                 landscapeWidth: 2048
             }  
        }
    } 
}

3、重启项目，页面布局时正常写 px 即可