1.先找到ui图，我这边是1920*1080的屏幕进行的设计

2.在界面找到跟样式的字体大小，进行设置，一般ui设置字体大小便可

3.在js中写入原生js代码

function adapter() {
  //获取布局视口宽度，布局视口=设备横向独立像素值
  const dpWidth = document.documentElement.clientWidth;
  //计算根字体大小
  const rootFonstSize = (dpWidth * 14) / 1920;
  //设置根字体大小
  //拿px大小/14就是rem大小  20/14 = 1.4rem
  document.documentElement.style.fontSize = rootFonstSize + "px";
}
adapter();
// 监听窗口变化
window.onresize = adapter;

4.在css下写入拿到ui的计算的rem样式

.logo {
  width: 1.57rem;
  height: 1.57rem;
}

5.在调整屏幕宽度时就可以等比例缩放字体，宽高等样式大小了

对于echerts图表来说

1.html定义过id并且赋值之后就可以在方法里加入

window.onresize = () => {
      let chatList = [
        "定义的id名称",
        "定义的id名称",
        "定义的id名称",
      ];
      chatList.forEach((item) => {
        echarts.init(document.getElementById(item)).resize();
      });
    };

2.这样就可以随着屏幕大小改变而改变了，当然缩放之后图表可能会变矮一些

3.在图表设置里面加入即可

 grid: {
          height:'80%'
        },