如何在Vue项目中使用vw实现移动端适配

1、使用如下几个插件

npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-vi
ewport-units cssnano --S

2、在postcssrc.js中配置

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": { utf8: false },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 750,  //The width of the viewPort
      viewportHeight: 1334,//The height of the viewport
      unitPrecision: 3,//the decimal numbers to allow the REM units to grow to
      viewportUnit: 'vw',//expected units
      selectorBlackList: ['.ignore', '.hairlines'],//the selectors to ignore and leave as px
      minPixelValue: 1,//set the minimun pixel value to replace
      mediaQuery: false//allow px to be converted in media queries
    },
    "postcss-viewport-units":{},
    "cssnano": { 
      preset: "advanced",
      autoprefixer: false, 
      "postcss-zindex": false 
    },
    // "autoprefixer": {}
  }
}

上述代码具体描述在《如何在Vue项目中使用vw实现移动端适配》