大屏数据可视化，常见的，在一些博览会、交通地图、互联网服务动态监控、售楼部里等等，通常会有一个大屏信息展示，各种信息动态感知。
要做这样一个大屏页面，首先要解决屏幕适配问题，
19201080（43）= 7680 3240
image.png
image.png
设计稿设计应按大屏尺寸设计，要想在本地开发的时候写出一个76803240的页面非常的不现实，常用的屏幕也就是19201080，1440900等等
所以需要解决适配问题

方案一：js获取视口宽高，计算比例，等比例缩放

image.png

  1. html,body宽高100%，
  2. 挂载节点app高度100vh
  3. 主页面宽高设置成设计稿的宽高，也就是7680*3240
  6. window.addEventListener('resize', () => {
  7.   clearTimeout(this.timeout);
  8.   this.timeout = setTimeout(() => {
  9.       this.setScale();
  10.   }, 400);
  11. });
  13. setScale(){
  14.   const { width = 1920, height = 1080 } = ENV.screens || {};
  15.   const root = document.querySelector('#app');
  16.   const perW = root.clientWidth / width;
  17.   const perH = root.clientHeight / height;
  18.   const getScale = () => {
  19.     if (ENV.screens.mode === 'full') {
  20.       // 全屏模式
  21.       return 'scale(' + perW + ',' + perH + ')';
  22.     }
  23.     // 按宽度等比例缩放
  24.     return 'scale(' + perW + ')';
  25.   }    
  26.   const style = {
  27.     width: width + 'px',
  28.     height: height + 'px',
  29.     transformOrigin: 'left top',
  30.     transform: this.getScale()
  31.   }
  32.   for (let k in style) {
  33.       document.querySelector('#app').style[k] = style[k];
  34.   }
  35. }

方案二：基于rem的自适应方法

首先计算缩放比，根据屏幕大小动态设置根元素html的fontSize值。

总结

  • 基于transform缩放的方案，优点是按设计稿设置元素大小，无需转换长度单位。缺点是放大展示时，echarts等图表会出现失真现象。为了避免图表失真，设计稿设计应按大屏尺寸设计，使其在屏幕中缩小展示。
  • 基于rem的缩放方案，元素长度单位需转换为rem。放大展示时，不会出现图表失真的情况。当缩小至根元素fontsize<12px时，由于浏览器展示的最小字号是12px，文字不能被再缩小，会出现比例不协调的情况。解决办法是，设置画布的最小宽度和最小高度，当屏幕小于最小宽度和最小高度时增加滚动条，使画布不再被缩小。

相关链接：https://juejin.cn/post/6966103143402700837