对照ui图进行大屏幕适配,echerts适配
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%' },
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。