vuecli3中移动端使用方法，postcss-pxtorem+amfe-flexible的适配方法

移动端适配配置

npm install postcss-pxtorem -D
npm i -S amfe-flexible

postcss-pxtorem：可以把px自动切换为rem，如果需要使用px的时候改成 Px 就可以生效
amfe-flexible：移动适配方案，自动计算html的 font-size 字体的大小。
mian引入

import  'amfe-flexible'

index.html

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

vue.config.js
需要在vue.config.js文件中配置一下，如果没有找到这个文件，可以自己创建一个vue.config.js文件

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            // 换算的基数 默认为37.5，一般不建议修改它，使用vant ui框架中也是默认37.5
            rootValue: 37.5,
            // 忽略转换正则匹配项，插件会转化所有的样式的px。比如引入了三方UI，也会被转化.
            //项目中有不需要自动转换成PX的样式，就在此添加，如: .vant  表示 .vant 开头的都不会转换
            selectorBlackList: [],
            propList: ['*'], //属性的选择器，*表示通用
          }),
        ]
      }
    }
  }
}

测试
然后修改页面大小就ok啦。

<template>
  <div>
    <p></p>
  </div>
</template>

<style>
p{
  width: 100px;
  height: 100px;
  background: #000;
}
</style>