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

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

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，最大适配2560pxif (width / dpr < 1366) {width = 1366 * dpr;} else if (width / dpr > 2560) {width = 2560 * dpr;}// 设置成24等份，设计稿时1920px的，这样1rem就是80pxvar rem = width / 24;docEl.style.fontSize = rem + "px";flexible.rem = win.rem = rem;}