vuecli3中移动端,将px转换成rem适配方法

vuecli3中移动端,将px转换成rem适配方法

vuecli3中没有配置的vue.config.js,那么这时候我们需要手动配置，在项目中手动创建一个即可，可是手动创建之后发现不知道怎么去运用那么按照我的方法去操作就可以生效了

移动端适配配置

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'

public文件夹下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的样式，就在此添加，如: selectorBlackList: ["top"]表示.top开头的不会转换
            selectorBlackList: [],
            propList: ['*'], //属性的选择器，*表示通用
          }),
        ]
      }
    }
  }
}