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