可視化大屏適配/自適應現狀

可視化大屏的適配是一個老生常談的話題了，現在其實不乏一些大佬開源的自適應插件、工具但是我為什么還要重復造輪子呢？因為目前市面上適配工具每一個都無法做到完美的效果，做出來的東西都差不多，最終實現效果都逃不出白邊的手掌心，可以解決白邊問題的，要么太過于復雜，要么會影響dom結構。

三大常用方式

1. vw/vh方案
   1. 概述：按照設計稿的尺寸，將px按比例計算轉為vw和vh
   2. 優點：可以動態計算圖表的寬高，字體等，靈活性較高，當屏幕比例跟 ui 稿不一致時，不會出現兩邊留白情況
   3. 缺點：每個圖表都需要單獨做字體、間距、位移的適配，比較麻煩
2. scale方案
   1. 概述：也是目前效果最好的一個方案
   2. 優點：代碼量少，適配簡單 、一次處理后不需要在各個圖表中再去單獨適配.
   3. 缺點：留白，據說有事件熱區偏移，但是我目前沒有發現有這個問題，即使是地圖也沒有
3. rem + vw vh方案
   1. 概述：這名字一聽就麻煩，具體方法為獲得 rem 的基準值 ，動態的計算html根元素的font-size ，圖表中通過 vw vh 動態計算字體、間距、位移等
   2. 優點：布局的自適應代碼量少，適配簡單
   3. 缺點：留白，有時圖表需要單獨適配字體

基于此背景，我決定要造一個簡單又好用的輪子。

解決留白問題

留白問題是在使用scale時才會出現，而其他方式實現起來又復雜，效果也不算太理想，總會破壞掉原有的結構，可能使元素擠在一起，所以我們還是選擇使用scale方案，不過這次要做出一點小小的改變。

常用分辨率

首先來看一下我的拯救者的分辨率：

它可以代表從1920往下的分辨率

我們可以發現，比例分別是：1.77、1.6、1.77、1.6、1.33... 總之，沒有特別夸張的寬高比。

計算補齊白邊所需的px

只要沒有特別夸張的寬高比，就不會出現特別寬或者特別高的白邊，那么我們能不能直接將元素寬高補過去？也就是說，當屏幕右側有白邊時，我們就讓寬度多出一個白邊的px，當屏幕下方有白邊時，我們就讓高度多出一個白邊的px。

很喜歡CSGO玩家的一句話："啊？"

先想一下，如果此時按寬度比例縮放，會在下方留下白邊，所以設置一下它的高度，設置多少呢？比如 scale==0.8 ，也就是說整個#app縮小了0.8倍，我們需要將高擴大多少倍才可以回到原來的大小呢？

emmm.....

算數我最不在行了，啟動高材生

原來是八分之十，我vue燒了。

當瀏覽器窗口比設計稿大或者小的時候，就應該觸發縮放，但是比例不一定，如果按照scale等比縮放時，寬度從1920縮小0.8倍也就是1536，而高度縮小0.8也就是743，如果此時瀏覽器高度過高，那么就會出現下方的白邊，根據高材生所說的，縮小0.8后只需要放大八分之十就可以變回原大小，所以以現在的高度743*1.25=928，使寬度=928px就可以完全充滿白邊！

真的是這樣嗎？感覺哪里不對勁...

是瀏覽器高度！我忽略了瀏覽器高度，我可以直接使用瀏覽器高度乘以1.25然后再縮放達0.8！就是 1 ！

也就是說 clientHeight / scale 就等于我們需要的高度！

我們用代碼試一試

function keepFit(designWidth, designHeight, renderDom) {
  let clientHeight = document.documentElement.clientHeight;
  let clientWidth = document.documentElement.clientWidth;
  let scale = 1;
  if (clientWidth / clientHeight < designWidth / designHeight) {
    scale = (clientWidth / designWidth)
    document.querySelector(renderDom).style.height = `${clientHeight / scale}px`;
  } else {
    scale = (clientHeight / designHeight)
    document.querySelector(renderDom).style.width = `${clientWidth / scale}px`;
  }
  document.querySelector(renderDom).style.transform = `scale(${scale})`;
}

上面的代碼可能看起來亂糟糟的，我來解釋一下：

參數分別是：設計稿的寬高和你要適配的元素，在vue中可以直接傳#app。

下面的if判斷的是寬度固定還是高度固定，當屏幕寬高比小于設計寬高比時，

我們把高度寫成 clientHeight / scale ，寬度也是同理。

最終效果

將這段代碼放到App.vue的mounted運行一下

如上圖所示：我們成功了，我們僅用了1 2 3 4....這么幾行代碼，就做到了足以媲美復雜寫法的自適應！

我把這些東西封裝了一個npm包：autofit.js ，開箱即用，歡迎下載！

親手打造集成工具：autofit.js

這是一款可以使你的項目一鍵自適應的工具 github源碼??go

• 從npm下載

npm i autofit.js

• 引入

import autofit from 'autofit.js'

• 快速開始

autofit.init()

默認參數為1920*929（即去掉瀏覽器頭的1080）, 直接在大屏啟動時調用即可

• 使用

export default {  
  mounted() {
  autofit.init({
        designHeight: 1080,
        designWidth: 1920,
        renderDom:"#app",
        resize: true
    })
  },
}

以上使用的是默認參數，可根據實際情況調整，參數分別為

   * - renderDom（可選）：渲染的dom，默認是 "#app"，必須使用id選擇器 
   * - designWidth（可選）：設計稿的寬度，默認是 1920 
   * - designHeight（可選）：設計稿的高度，默認是 929 ，如果項目以全屏展示，則可以設置為1080
   * - resize（可選）：是否監聽resize事件，默認是 true

結語

諾克薩斯即將崛起