大屏适配解决方案 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已完成加载，则立即调整字体大小，否则等待html加载完成再调整字体大小
    if (document.body) {
      document.body.style.fontSize = 12 * dpr + "px";
    } else {
      // 监听DOMContentLoaded 事件——当初始的 HTML 文档被完全加载和解析完成之后触发，无需等待样式表
      document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
  }
  setBodyFontSize();

  // 根据屏幕宽度，重置1rem的长度为当前屏幕宽度的1/10
  function setRemUnit() {
    var rem = docEl.clientWidth / 10;
    // 1rem的值永远为根元素的字体大小，所以此处通过调整全局字体大小来重置rem
    docEl.style.fontSize = rem + "px";
  }

  setRemUnit();

  // 监听resize事件——屏幕大小发生变化时触发
  window.addEventListener("resize", setRemUnit);
  // 监听pageshow事件——显示页面时触发
  window.addEventListener("pageshow", function (e) {
    // 若是浏览器中点击后退时显示页面，则重置rem
    if (e.persisted) {
      setRemUnit();
    }
  });

  // 检测是否支持0.5px
  if (dpr >= 2) {
    var fakeBody = document.createElement("body");
    var testElement = document.createElement("div");
    testElement.style.border = ".5px solid transparent";
    fakeBody.appendChild(testElement);
    docEl.appendChild(fakeBody);
    if (testElement.offsetHeight === 1) {
      docEl.classList.add("hairlines");
    }
    docEl.removeChild(fakeBody);
  }
})(window, document);

然后需要的页面中引入该文件即可：import '@/utils/flexible'（其实就是立即调用了上面的方法）

引入之后注意： 上面

正常情况下是1rem == 16px

这里需要修改一下，我们使用vsCode开发，下载

点击设置->扩展设置将 

修改为192，因为上面是根据浏览器的宽度来计算的，十分之一宽度为1rem,正常浏览器分辨率为1920*1080，所以这里修改为192

这样就ok啦！所有单位都不要使用px,转为rem即可。（好像屏幕缩放超过150%就不起作用了，字体会变大，不过不重要，投放到大屏上面其实是缩小的，符合） 

3.echart图表中的字体适配

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

echartPxToRem.js文件

// 字体转换 px -> rem
export function fontChart(res) {
  let docEl = document.documentElement,
    clientWidth =
      window.innerWidth ||
      document.documentElement.clientWidth ||
      document.body.clientWidth;
  if (!clientWidth) return;
  // 此处的3840 为设计稿的宽度，记得修改！
  let fontSize = clientWidth / 1920;
  return res * fontSize;
}

 在echarts文件中 import { fontChart } from '@/utils/echartPxToRem'引入

然后在设置字体大小的地方去调用fontChart这个方法（echar中默认字体单位都是px）例如：

这样设置好之后保存 ---  你会发现不起作用 

还需要关键的一步！！如下：

我们要监听浏览器的变化，浏览器改变的时候重新调用加载echarts图表的方法，其实就是重新调一下fontChart这个方法，重新根据浏览器计算一下以达到字体适配 

 这里注意几个细节：

一：监听使用window.addEventListener而不使用window.onresize是因为一个页面存在了很多个图表，如果使用window.onresize方法，你会发现只有最后一个起作用，前面的都失效了，这是因为onresize本身就是一个回调，当你改变的时候，前一个就会被覆盖。

二：这里window.addEventListener,第二个参数传的不是匿名函数，什么意思呢？如下：

上面这个就是一个匿名函数，这种方式同样可以达到重新调用fontChart方法，实现echart字体适配，但是为什么不使用这种？因为window.addEventListener第二个参数传的是匿名函数将无法通过window.removeEventListener移除监听。

我们使用window.addEventListener监听事件，那么在离开页面的时候就要移除监听

 如果不将该监听事件移除掉，那么这个监听事件会一直存在，即使在其他页面。

每个echart都需要监听window改变来适配，你想想一个数据可视化项目会有多少echart图表？

那么结果就是你的大屏页面会变得非常卡顿，亲测真的卡~~~~~

数据可视化常用网站

就这么多了~~