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.4remdocument.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%'},