可視化大屏適配/自適應現(xiàn)狀

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

三大常用方式

• vw/vh方案

  概述：按照設計稿的尺寸，將px按比例計算轉為vw和vh

  優(yōu)點：可以動態(tài)計算圖表的寬高，字體等，靈活性較高，當屏幕比例跟 ui 稿不一致時，不會出現(xiàn)兩邊留白情況

  缺點：每個圖表都需要單獨做字體、間距、位移的適配，比較麻煩

• scale方案

  概述：也是目前效果最好的一個方案

  優(yōu)點：代碼量少，適配簡單 、一次處理后不需要在各個圖表中再去單獨適配.

  缺點：留白，據(jù)說有事件熱區(qū)偏移，但是我目前沒有發(fā)現(xiàn)有這個問題，即使是地圖也沒有

• rem + vw vh方案

  概述：這名字一聽就麻煩，具體方法為獲得 rem 的基準值 ，動態(tài)的計算html根元素的font-size ，圖表中通過 vw vh 動態(tài)計算字體、間距、位移等

  優(yōu)點：布局的自適應代碼量少，適配簡單

  缺點：留白，有時圖表需要單獨適配字體

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

解決留白問題

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

常用分辨率

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

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

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

計算補齊白邊所需的px

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

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

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

emmm.....

算數(shù)我最不在行了，啟動高材生

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

當瀏覽器窗口比設計稿大或者小的時候，就應該觸發(fā)縮放，但是比例不一定，如果按照scale等比縮放時，寬度從1920縮小0.8倍也就是1536，而高度縮小0.8也就是743，如果此時瀏覽器高度過高，那么就會出現(xiàn)下方的白邊，根據(jù)高材生所說的，縮小0.8后只需要放大八分之十就可以變回原大小，所以以現(xiàn)在的高度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})`;
}

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

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

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

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

最終效果

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

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

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

親手打造集成工具：vue-autofit

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

• 從npm下載

npm i vue-autofit

• 引入

import autofit from 'vue-autofit'

• 快速開始

autofit.init()

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

• 使用

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

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

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

以上就是教你使用vue-autofit 一行代碼搞定自適應可視化大屏的詳細內容，更多關于vue-autofit自適應可視化大屏的資料請關注腳本之家其它相關文章！

最新評論