VUE pc端-移动端-ipad端适配（原理转化为vw布局，根据宽度适配）

设备宽度=100vw
1vw = 750px/100px = 7.5px
100px = 1/7.5*100vw

1.引入 postcss-px-to-viewport 插件（将class转换为vw）

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

2.在根目录下新建 .postcssrc.js 文件，引入下面代码

module.exports = {
  "plugins": {
    "postcss-px-to-viewport": {    //把px单位转换为vw、vh、vmin或者vmax这样的视窗单位，也是vw适配方案的核心插件之一。
      viewportWidth: 375,    //视窗的宽度
      //viewportHeight: 1600,   //视窗的高度
      unitPrecision: 3,    //将px转化为视窗单位值的小数位数
      viewportUnit: 'vw',    //指定要转换成的视窗单位值
      selectorBlackList: ['.ignore', '.hairlines', '.vant'],    //指定不转换视窗单位值得类，可以自定义，可以无限添加
      minPixelValue: 1,    //小于等于1px不转换为视窗单位
      mediaQuery: false,   //允许在媒体查询中使用px
    },
  }
}

3.引入 style-vw-loader 插件（将行内样式转换为vw）

npm install style-vw-loader --save-dev

4.在根目录下新建 vue.config.js 文件，引入下面代码

module.exports = {
  publicPath: "./",


  chainWebpack: (config) => {
      config.module
          .rule('vue')
          .test(/\.vue$/)
          .use('style-vw-loader')
          .loader('style-vw-loader')
          .options({
              viewportWidth: 375,//设计稿宽度
          })
  }
}