大屏适配解决方案 VUE

最近在做一个数据可视化的项目，整个项目全是大屏展示，期间也是遇到很多问题，最令人头疼的就是大屏的适配。我这个项目是要投放到4K超大屏上展示，自然要考虑到分辨率，浏览器缩放，字体（包括图表中的字体）的适配。下面介绍一下适配方案（或许并不是最好的，目前用着还是可以解决，大牛有更好更优雅的方式评论区请指教）：

1.flex布局

布局肯定是选择css3中的flex布局了，尽量多使用百分比，避免使用px单位的使用，相信作为前端工程师（高大上哈哈）的我们在布局这块儿应该都没啥问题，这里就不多说~~~~

2.字体（不包括echart图表这种）

在@/utils文件夹下建flexible.js文件

flexible.js文件：

// 来自 https://github.com/amfe/lib-flexible/blob/2.0/index.js
(function flexible(window, document) {
  var docEl = document.documentElement;
  // 获取当前显示设备的物理像素分辨率与CSS像素分辨率之比;
  var dpr = window.devicePixelRatio || 1;

  //根据分辨率调整全局字体大小
  function setBodyFontSize() {
    // html已完成加载&#x