解決 “數據大屏“ 展示的屏幕適配問題

現在非常流行的大數據可視化方案，不過要做數據大屏有一個很重要的問題就是屏幕適配。

一、引入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

這樣我們在寫的時候就會自動計算比例