解决 “数据大屏“ 展示的屏幕适配问题

现在非常流行的大数据可视化方案，不过要做数据大屏有一个很重要的问题就是屏幕适配。

vue项目使用flexible.js和rem适配
vue中使用flexible.js实现屏幕自适应

一、引入flexible文件
flexible是移动端屏幕适配非常著名的的插件，能够帮助我们修改rem的值，也就是修改html标签下font-size的值。
例：下载flexible.js文件并放在common目录下，然后在vue-cli中的main.js主配置文件中引入

// 适配flex，文件放在src/common目录下
import "@/common/flexible.js";

二、 修改文件
假设我的模板是按照1920px的尺寸来写的，那么我们首先需要去flexible.js文件下修改它所缩放的尺寸间距如： 最小1366px，最大适配2560px，并且比例设置成24等份，设计稿是1920px，这样1rem就是80px。

function refreshRem() {
    var width = docEl.getBoundingClientRect().width;
    // 最小1366px，最大适配2560px
    if (width / dpr < 1366) {
      width = 1366 * dpr;
    } else if (width / dpr > 2560) {
      width = 2560 * dpr;
    }
    // 设置成24等份，设计稿时1920px的，这样1rem就是80px
    var rem = width / 24;
    docEl.style.fontSize = rem + "px";
    flexible.rem = win.rem = rem;
  }

三、 借助插件自动计算rem

以vscode为例


设置比例，前面说了，我们按照1920px切成了24份，那么一份就是80px

这样我们在写的时候就会自动计算比例