一个VUE已成型的项目自适应多种屏幕分辨率不是办法的办法

VUE已成型的项目改成自适应多种分辨率 尝试过一些 插件 lib-flexible px2rem-loader postcss-pxtorem等等 感觉对pc端且已成型的项目不怎么友好，各种配置报错，又搞不懂。。。。就想了个蠢办法来实现 当然能达到这种效果全部归结于 直接把html根元素的字体大小设置为1px 哭了。。。

当然这样搞是不科学的，浏览器设定的最小字体大小为12px，所以浏览器自动把html{font-size: 1px} 识别为html{font-size: 12px}，所以效果也就是1rem = 12px。但是我ok了
1rem为何不能为1px

在工具函数文件夹下创建rem.js

rem.js

// 基础设置为1px
const baseSize = 1
// 设置 rem 函数
function setRem () {
  // 保留后四位  String(number).replace(/^(.*\..{4}).*$/,"$1")
  const scale = Number(String(document.documentElement.clientWidth / 1920).replace(/^(.*\..{4}).*$/,"$1"))
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 首次加载设置 rem
setRem()
// 改变窗口大小时重新设置 rem
window.onresize = function () {
  setRem()
}

在main.js中引入rem.js

import './utils/rem'

然后全局修改所有的css单位 px转rem 包括组件的css（例如element 我是把css库下载到本地的src下）

更新

html的字体大小设置为font-size:62.5% 浏览器默认字体大小是16px，rem与px关系为：1rem = 10px，

参考图：