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 即可