vant移动端REM适配(cli3.0)

按照官方文档所说,需要用到的包有:

• postcss-pxtorem
• lib-flexible

首先安装 postcss-pxtorem ,这个包是将 px 转为 rem, 安装好之后需要进行配置, 由于使用的是 cli3.0, 没有psotcss.config.js 和 vue.config,js , 所以需要在根目录手动创建一个 vue.config.js
创建好之后在里面按照官方文档进行配置,如下:

module.exports = {
  lintOnSave: true,
  css: {
      loaderOptions: {
          postcss: {
              plugins: [
                  require('postcss-pxtorem')({
                      rootValue : 37.5, // 换算的基数
                      propList   : ['*'],
                  }),
                  require('autoprefixer')({
                    browsers: ['Android >= 4.0', 'iOS >= 8']
                  })
              ]
          }
      }
  	},
}

这一步做完之后页面上的 px 单位就全部转化为 rem 单位了, 但是行内样式的单位是没办法转换的

下一步安装 lib-flexible
这个包主要是为了设置 rem 基准值 也就是给 HTML 设置 fontsize , 它会根据不同屏幕大小动态设置
安装完成之后, 在main.js中引入即可

import 'amfe-flexible/index.js'

至此就完成了rem的适配