前端可视化大屏适配/自适应三种实现方式-Toy模板网

这篇具有很好参考价值的文章主要介绍了前端可视化大屏适配/自适应三种实现方式。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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 ，宽度也是同理。文章来源地址https://www.toymoban.com/news/detail-558525.html

到了这里，关于前端可视化大屏适配/自适应三种实现方式的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！