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

可視化大屏的適配是一個(gè)老生常談的話題了，現(xiàn)在其實(shí)不乏一些大佬開源的自適應(yīng)插件、工具但是我為什么還要重復(fù)造輪子呢？因?yàn)槟壳笆忻嫔线m配工具每一個(gè)都無(wú)法做到完美的效果，做出來(lái)的東西都差不多，最終實(shí)現(xiàn)效果都逃不出白邊的手掌心，可以解決白邊問(wèn)題的，要么太過(guò)于復(fù)雜，要么會(huì)影響dom結(jié)構(gòu)。

三大常用方式

• vw/vh方案

  概述：按照設(shè)計(jì)稿的尺寸，將px按比例計(jì)算轉(zhuǎn)為vw和vh

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

  缺點(diǎn)：每個(gè)圖表都需要單獨(dú)做字體、間距、位移的適配，比較麻煩

• scale方案

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

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

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

• rem + vw vh方案

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

  優(yōu)點(diǎn)：布局的自適應(yīng)代碼量少，適配簡(jiǎn)單

  缺點(diǎn)：留白，有時(shí)圖表需要單獨(dú)適配字體

基于此背景，我決定要造一個(gè)簡(jiǎn)單又好用的輪子。

解決留白問(wèn)題

留白問(wèn)題是在使用scale時(shí)才會(huì)出現(xiàn)，而其他方式實(shí)現(xiàn)起來(lái)又復(fù)雜，效果也不算太理想，總會(huì)破壞掉原有的結(jié)構(gòu)，可能使元素?cái)D在一起，所以我們還是選擇使用scale方案，不過(guò)這次要做出一點(diǎn)小小的改變。

常用分辨率

首先來(lái)看一下我的拯救者的分辨率：

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

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

計(jì)算補(bǔ)齊白邊所需的px

只要沒有特別夸張的寬高比，就不會(huì)出現(xiàn)特別寬或者特別高的白邊，那么我們能不能直接將元素寬高補(bǔ)過(guò)去？也就是說(shuō)，當(dāng)屏幕右側(cè)有白邊時(shí)，我們就讓寬度多出一個(gè)白邊的px，當(dāng)屏幕下方有白邊時(shí)，我們就讓高度多出一個(gè)白邊的px。

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

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

emmm.....

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

原來(lái)是八分之十，我vue燒了。

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

真的是這樣嗎？感覺哪里不對(duì)勁...

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

也就是說(shuō) 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})`;
}

上面的代碼可能看起來(lái)亂糟糟的，我來(lái)解釋一下：

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

下面的if判斷的是寬度固定還是高度固定，當(dāng)屏幕寬高比小于設(shè)計(jì)寬高比時(shí)，

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

最終效果

將這段代碼放到App.vue的mounted運(yùn)行一下

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

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

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

這是一款可以使你的項(xiàng)目一鍵自適應(yīng)的工具 github源碼??go

• 從npm下載

npm i vue-autofit

• 引入

import autofit from 'vue-autofit'

• 快速開始

autofit.init()

默認(rèn)參數(shù)為1920*929（即去掉瀏覽器頭的1080）, 直接在大屏啟動(dòng)時(shí)調(diào)用即可

• 使用

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

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

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

以上就是教你使用vue-autofit 一行代碼搞定自適應(yīng)可視化大屏的詳細(xì)內(nèi)容，更多關(guān)于vue-autofit自適應(yīng)可視化大屏的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論