amfe-flexible.js

rem适配

1、安装

1、安装postcss-pxtorem

$ npm install postcss-pxtorem --save-dev

2、安装amfe-flexible

$ npm i -S  amfe-flexible

3、在main.js中引入amfe-flexible

$ import 'amfe-flexible'
$ import 'amfe-flexible/index.js'

4、在vue.config.js中进行配置

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({ // 把px单位换算成rem单位
            rootValue: 37.5, // vant官方使用的是37.5
            selectorBlackList: ['vant', 'mu'], // 忽略转换正则匹配项
            propList: ['*']
          })
        ]
      }
    }
  }
}

或者

    "postcss-pxtorem": {
       "rootValue": 75,
       "propList": ['*','!font','!font-size']
    }

5、在index.html头部加入手机端自适应meta

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

2、安装

1、直接引入

image.png

2、在index.html中引入

    <script src="<%= BASE_URL %>static/amfe-flexible.js"></script>