可视化大屏自适应：autofit.js 一行搞定布局

三大常用方式

1. vw/vh方案

   1. 概述：按照设计稿的尺寸，将px按比例计算转为vw和vh

   2. 优点：可以动态计算图表的宽高，字体等，灵活性较高，当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况

   3. 缺点：每个图表都需要单独做字体、间距、位移的适配，比较麻烦

2. scale方案

   1. 概述：也是目前效果最好的一个方案

   2. 优点：代码量少，适配简单 、一次处理后不需要在各个图表中再去单独适配.

   3. 缺点：留白，有事件热区偏移，下面介绍的autofit.js已经完全解决了此问题

3. rem + vw vh方案

   1. 概述：这名字一听就麻烦，具体方法为获得 rem 的基准值 ，动态的计算html根元素的font-size ，图表中通过 vw vh 动态计算字体、间距、位移等

   2. 优点：布局的自适应代码量少，适配简单

   3. 缺点：留白，有时图表需要单独适配字体

核心代码

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 ，宽度也是同理。

下载依赖

npm i autofit.js

引入

import autofit from 'autofit.js'

使用

 // App.vue 需要在renderDom挂载到dom之后，才可以生效
export default {  
  mounted() {
      autofit.init({
        designHeight: 1080,
        designWidth: 1920,
        renderDom:"#app",
        resize: true
       })
  },
}

以上使用的是默认参数，可根据实际情况调整，参数分别为

• renderDom（可选）：渲染的dom，默认是 "#app"，必须使用id选择器

• designWidth（可选）：设计稿的宽度，默认是 1920

• designHeight（可选）：设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080

• resize（可选）：是否监听resize事件，默认是 true