VW布局

1.https://www.w3cplus.com/mobile/vw-layout-in-vue.html（先参阅该网址）

2.postcssrc（VW布局时该文件的配置）

// https://github.com/michael-ciniawsky/postcss-load-config

module.exports = {
  "plugins": {
    // vue-cli默认配置了下面前三个postcss插件
    //1.postcss-import的主要功能是解决@import引入路径问题
    //引用该插件让我们轻易使用本地文件，node_modules或者web_modules文件
    //配合postcss-url让引入文件变得更轻松
    "postcss-import": {},


    //2. 该插件主要用来处理文件，比如图片文字，字体文件等引用路径的处理
    // 在Vue项目中，vue-loader已具有类似的功能，只需要配置中将vue-loader配置进去
    "postcss-url": {},


    // to edit target browsers: use "browserslist" field in package.json

    //3. 该插件是用来自动处理浏览器前缀的一个插件
    //"autoprefixer": {},


    // 要完成vw的布局兼容方案，需要自己配置下面的几个postcss插件
    // postcss-aspect-ratio-mini
    // postcss-px-to-viewport
    // postcss-write-svg
    // postcss-cssnext
    // cssnano
    // postcss-viewport-units

  "postcss-aspect-ratio-mini": {},

    // 以下配置根据项目实际情况作调整
    "postcss-px-to-viewport":{
      viewportWidth: 750,      //视口宽度，对应的是我们设计稿的宽度，一般是750
      //viewportHeight: 1334,    //视口高度，根据750设备的宽度来指定，一般指定1334，也可以不配置
      unitPrecision: 3,        //单位精度
      viewportUnit: 'vw',      //单位名称
      selectorBlackList: ['.ignore', '.hairlines','.van-',/^(.van)/,/^(.igno)/], //拥有该类名的元素保留px单位
      minPixelValue: 2,        //小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
      mediaQuery: false        //允许在媒体查询中转换`px`
    },
    "postcss-write-svg":{
      utf8: false
    },
    // 特别声明：由于cssnext和cssnano都具有autoprefixer,事实上只需要一个，所以把默认的autoprefixer删除掉，然后把cssnano中的autoprefixer设置为false。
    "postcss-cssnext":{},

    "cssnano": {
      // 这里用到了preset: "advanced",所以需要安装(npm i cssnano-preset-advanced --save-dev)（之前没有安装，导致在此再次爬坑）,不用就注释掉
      preset: "advanced",
      autoprefixer: false,
      "postcss-zindex":false
    },
    "postcss-viewport-units":{}
  }
};