移动端适配

  将单位转换为rem

        一、使用 lib-flexible 动态设置 REM 基准值（html 标签的字体大小）

        1、安装

npm i amfe-flexible

        2、main.js导入

import 'amfe-flexible'

        二、使用 postcss-pxtorem 将 px 转为 rem

          1、安装

npm install postcss-pxtorem -D

         2、然后在项目根目录中创建 .postcssrc.js 文件

/**
 * PostCSS 配置文件
 */

module.exports = {
  // 配置要使用的 PostCSS 插件
  plugins: {
    // 配置使用 autoprefixer 插件
    // 作用：生成浏览器 CSS 样式规则前缀
    // VueCLI 内部已经配置了 autoprefixer 插件
    // 所以又配置了一次，所以产生冲突了
    // 'autoprefixer': { // autoprefixer 插件的配置
    //   // 配置要兼容到的环境信息
    //   browsers: ['Android >= 4.0', 'iOS >= 8']
    // },

    // 配置使用 postcss-pxtorem 插件
    // 作用：把 px 转为 rem
    'postcss-pxtorem': {
      rootValue ({ file }) {
        return file.indexOf('vant') !== -1 ? 37.5 : 75
      },
      propList: ['*']
    }
  }
}

        3、重新启动服务