前端可视化大屏适配/自适应三种实现方式

可视化大屏适配/自适应现状
三大常用方式

vw/vh方案
概述:按照设计稿的尺寸,将px按比例计算转为vw和vh
优点:可以动态计算图表的宽高,字体等,灵活性较高,当屏幕比例跟 ui 稿不一致时,不会出现两边留白情况
缺点:每个图表都需要单独做字体、间距、位移的适配,比较麻烦

scale方案
概述:也是目前效果最好的一个方案
优点:代码量少,适配简单 、一次处理后不需要在各个图表中再去单独适配.
缺点:留白,据说有事件热区偏移,但是我目前没有发现有这个问题,即使是地图也没有

rem + vw vh方案
概述:这名字一听就麻烦,具体方法为获得 rem 的基准值 ,动态的计算html根元素的font-size ,图表中通过 vw vh 动态计算字体、间距、位移等
优点:布局的自适应代码量少,适配简单
缺点:留白,有时图表需要单独适配字体

clientHeight / scale 就等于我们需要的高度!
我们用代码试一试

function keepFit(designWidth, designHeight, renderDom) {
  let clientHeight = document.documentElement.clientHeight;
  let clientWidth = document.documentElement.clientWidth;
  let scale = 1;
  if (clientWidth / clientHeight < designWidth / designHeight) {
    scale = (clientWidth / designWidth)
    document.querySelector(renderDom).style.height = `${clientHeight / scale}px`;
  } else {
    scale = (clientHeight / designHeight)
    document.querySelector(renderDom).style.width = `${clientWidth / scale}px`;
  }
  document.querySelector(renderDom).style.transform = `scale(${scale})`;
}

上面的代码参数分别是:设计稿的宽高和你要适配的元素,在vue中可以直接传#app。
下面的if判断的是宽度固定还是高度固定,当屏幕宽高比小于设计宽高比时,
我们把高度写成 clientHeight / scale ,宽度也是同理。