VUE 移动端自适应

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

在根目录下新建文件postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer')({
      browsers: [
        "last 5 versions",
        "not ie < 11",
        "ios >= 7",
        "android >= 4.0"
      ]
    }),
    require('cssnano'),
    require('postcss-px-to-viewport')({
       unitToConvert: 'px', //(String) 要转换的单位
      viewportWidth: 373,   //viewport的宽度，默认320，可以根据设计稿来修改。1440就写1440
      unitPrecision: 5, //指定px转换为视窗单位值的小数位数，默认是5
      propList: ['*'],  //指定可以转换的css属性，默认是['*'],代表全部属性进行转换
      viewportUnit: 'vw', //(String) 指定要转换成的视窗单位，默认vw
      fontViewportUnit: 'vw', //(String) 指定字体需要转换成的视窗单位，默认vw
      selectorBlackList: [], //指定不转换为视窗单位的类，保留px，值为string或正则regexp，建议1~2个通用的类名。
      minPixelValue: 1, //(Number)默认值1，小于或等于`1px`不转换为视窗单位。
      mediaQuery: false, //是否在媒体查询时也转换px,默认false。
      replace: true, // 替换包含vw的规则，而不是添加回退。
      exclude: [], //设置忽略文件,如node_modules
      landscape: false,
      landscapeUnit: 'vw',
      landscapeWidth: 568
    })
  ]
}

在index.html中注释掉

<!--  <meta name="viewport"-->
<!--        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">-->