大屏利用rem自适应

使用rem适应不同分辨率

1. 在head标签中调用自动设置html的font-size的方法 并添加页面刷新监听事件
   注意如果在body后面才调用 页面刷新会有一瞬间的变形 因为在文档加载完成前就需要调用，设置对应的宽高样式

  <script>
    setHtmlFontSize();
    window.addEventListener(
      "resize", setHtmlFontSize, false
    );
  </script>

2. js中定义的方法：

function setHtmlFontSize() {
    let docEle = document.documentElement;
    let screenRatioByDesign = 16 / 9
    let screenRatio = docEle.clientWidth / docEle.clientHeight;
    let fontSize = ((screenRatio > screenRatioByDesign ? screenRatioByDesign / screenRatio : 1) * docEle
        .clientWidth) / 10;
    docEle.style.fontSize = fontSize.toFixed(3) + "px";
}

设计稿为1920X1080 因此比例是16/9，我的项目是缩小10倍 ，最后的结果 fontsize是192。即width: 10rem ，height：5.625rem，其他样式中的px都换成rem

参考：
关于大屏利用rem自适应
大屏上的全屏页面的自适应适配方案
vue中使用rem布局解析+大屏自适应