简单来说一下rem 

em：是相对于父元素字体大小为单位

rem：是相对于根元素的字体大小的单位

如果我们平常写px就写死了 不管移动端屏幕多大多小  元素大小永远不会发生改变  我们可以通过rem进行适配  rem是基于根标签的字体大小进行改变

实现适配

1.安装postcss-pxtorem      官网地址

npm i postcss-pxtorem -D
//-D表示开发依赖，项目上线就不需要了
// 看单词拼写也懂了 将px转换成rem  是一款postcss 插件  

2.安装lib-flexible    官网地址

npm i amfe-flexible
// 打包后依旧需要 默认-S       注意不是下载lib-flexible
// 根据不同的手机屏幕宽度，动态设置rem的参考值   默认计算方式是屏幕宽度的1/10，默认值是37.5

3.在根目录创建postcss.config.js

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

4.在main.js入口文件导入 

import 'amfe-flexible'

这里有个小坑啊   刚开始一直试不出来浏览器默认字体大小   最后发现只要给元素宽高、字体大小都能进行适配    最后看了一下github

 上面说： 

标签：Vue,字体大小,lib,适配,rem,flexible,postcss,pxtorem
来源： https://blog.csdn.net/m0_46846526/article/details/117592333