vue项目中的快速实现Rem适配

问题：

在进行移动端项目时，需要去适配不同的手机屏幕。我们希望实现适配的效果是：与屏幕大小相关。

技术手段：

• 把所有px单位改成rem ， 用postcss-pxtorem 来实现，它是一款 postcss 插件，用于将px转化为 rem。
• 根据不同的手机屏幕的宽度，来动态设置rem的参考值：html标签上的font-size的大小。用lib-flexible 来实现，用于设置 rem 基准值
• 它对应的包名不是这个名字，而是amfe-flexible。
• 它需要是生产依赖

步骤：

第一步：安装包

输入命令 npm i postcss-pxtorem -D
作用：把px单位自动转成rem单位

输入命令 npm i amfe-flexible

作用: 修改rem基准值的js插件 需要在打包后需要使用

第二步：设置postcss

根目录下创建postcss.config.js文件
内容如下：

module.exports = {
  plugins: {
    'postcss-pxtorem': {
      rootValue: 37.5, // 转换px的基准值。例如一个元素宽是75px，则换成rem之后就是2rem。
      propList: ['*']
    }
  }
}

根据设置屏幕的宽度去调整rem的值（html标签上font-size的大小）
它的默认计算方式是屏幕宽度的1/10，默认值是37.5

第三步 重启项目

关闭后 输入命令 npm run serve 重启一下项目

第四步 引入：

入口文件main.js导入 amfe-flexible

// 它会根据的手机尺寸来调整rem的基准值：html标签上的font-size。
import 'amfe-flexible'