移动端rem适配

• 1安装 amfe-flexible插件

  • yarn add amfe-flexible

  • npm i amfe-flexible

• 在main.js导入

  • import "amfe-flexible"

• 安装postcss-pxtorem

  • yarn add postcss-pxtorem@5.0.0

• 配制

  • 创建postcss.config.js(加载css时使用)
    module.exports={
        plugins:{
            rootValue:基准值(37.5),
            propList:哪些css需要转换，针对的css选择["*"]
        }
    }
    ​
    html 下font-size=屏幕宽度/10
    ​
    设计稿：1080   723px用rem表示    723/108rem
    ​
    ​
    ​
    const path = require('path')
    module.exports = ({ file }) => {
      // 如果是vant的css需要转换，它的文件都是来自于node_modules/vant   
      // file.dirname:需要转换的文件路径
      const base = file.dirname.includes(path.join('node_modules', 'vant'))
        ? 37.5
        : 75
      return {
        plugins: {
          'postcss-pxtorem': {
            rootValue: base,
            propList: ['*']
          }
        }
      }
    }
    ​