前段時(shí)間做了一個(gè)自適應(yīng)的小工具（autofit.js）

經(jīng)過一段時(shí)間的試用，同學(xué)們發(fā)現(xiàn)了工具存在的一些問題，我自己也發(fā)現(xiàn)了一些，這篇文章是針對(duì)這些問題撰寫的。

autofit.js

autofit.js是一款可以讓你的項(xiàng)目一鍵自適應(yīng)的工具。

autofit.js npm 主頁

autofit.js github 主頁

安裝

npm i autofit.js

使用

import autofit from 'autofit.js'
autofit.init({
    designHeight: 929,
    designWidth: 1920,
    renderDom:"#app",
    resize: true
})

一般按照1080的設(shè)計(jì)稿開發(fā)時(shí)，直接調(diào)用autofit.init() 即可。插件會(huì)自動(dòng)計(jì)算縮放后撐滿瀏覽器窗口所需的寬高。

解決問題

使用了autofit.js依然出現(xiàn)了白邊

因?yàn)閍utofit.js使用的是scale方案，transform: scale() 縮放時(shí)，dom元素在文檔中的實(shí)際占位是不變的

這樣下方就出現(xiàn)了白邊，右側(cè)還出現(xiàn)了滾動(dòng)條

解決此問題將body設(shè)置超出隱藏即可：

body{
    overflow: hidden;
}

在設(shè)置超出隱藏后，滾動(dòng)條和白邊都不見了。

#app充滿了全屏，里面的元素卻不能自適應(yīng)位置。

出現(xiàn)這種問題的原因很明顯，你需要將內(nèi)容元素做一個(gè)簡單的適配定位，因?yàn)閍utofit.js只做了縮放和填充部分。如果你的頁面元素沒有做均勻分布的位置，也是會(huì)出現(xiàn)這種情況的。

以上圖為例

如果出現(xiàn)了這個(gè)問題，推薦使用flex進(jìn)行布局即可。

display:flex;
justify-content: space-between;

或者直接使用定位，將三塊內(nèi)容定位到左上、中間、右上。

.left, .right {
    position: fixed;
    width: 25%;
    height: 100%;
    top: 0;
    padding-top: 70px;
    z-index: 9999;
}

手動(dòng)縮放瀏覽器窗口時(shí)，echarts圖表被拉伸了

這個(gè)問題按說不會(huì)是因?yàn)閍utofit.js引起的（前提是你沒有使用百分比），但是既然有人提到了，這里說一下解決辦法。

echarts圖表拉伸，說明你的echarts外層容器變大或者變小的，導(dǎo)致canvas元素拉伸了，解決辦法為：

window.addEventListener('resize', this.redraw, false);    
redraw() {
      this.myChart.clear();
      this.myChart.resize();
      this.draw();
},

像我這樣，監(jiān)聽resize事件，并重繪echarts即可。

手動(dòng)縮放瀏覽器可以正常適應(yīng)，點(diǎn)擊最大化（或F11全屏）時(shí)卻失效了

這個(gè)問題屬于autofit.js的一個(gè)bug，目前在最新版本已經(jīng)修復(fù)了。

造成Bug的代碼

  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`;
  }

造成這個(gè)bug的原因是，全屏?xí)r的寬高比不小于（因?yàn)槭堑扔冢┰O(shè)計(jì)圖寬高比，導(dǎo)致高度沒有被重新設(shè)置。

所以在曾經(jīng)設(shè)置過高度（即基于寬度px不變的縮放），再最大化的情況，高度不會(huì)變。在這種邏輯下，寬度有時(shí)也會(huì)失效。

修改后的代碼（1.0.8）：

let scale = (clientWidth / clientHeight < designWidth / designHeight) ? (clientWidth / designWidth) : (clientHeight / designHeight)
dom.style.height = `${clientHeight / scale}px`;
dom.style.width = `${clientWidth / scale}px`;
dom.style.transform = `scale(${scale})`;

這樣無論是怎樣的寬高比，它都會(huì)同時(shí)設(shè)置寬度和高度。

使用autofit.js后，在小屏幕上字體（或元素）變得過小

造成這種問題的原因大概率是你同時(shí)使用了其他自適應(yīng)工具，或者使用了相對(duì)單位，導(dǎo)致你的網(wǎng)站進(jìn)行了雙重適配。

解決方式也很簡單，autofit.js不需要任何其他輔助工具，如果想體驗(yàn)autofit.js一行搞定，關(guān)閉其他插件，且不要使用任何相對(duì)單位即可！

autofit.js僅推薦使用px進(jìn)行開發(fā)。

使用autofit.js后，地圖事件熱區(qū)偏移了

不要手動(dòng)設(shè)置：transform-origin，因?yàn)閍utofit.js將它設(shè)置成了 0 0，即以左上角為基準(zhǔn)點(diǎn)縮放，這可以保證dom元素不會(huì)偏移。

如果你使用的地圖是基于canvas繪制的，那么有可能會(huì)出現(xiàn)偏移現(xiàn)象（往往伴隨著拉伸），那么和上面的echarts的解決方式一樣，只需要重繪就可以了。

如果是基于svg繪制的，那么不應(yīng)該會(huì)出現(xiàn)這個(gè)問題，如果你的svg繪制的地圖也出現(xiàn)了熱區(qū)偏移現(xiàn)象，歡迎來私信捶我。

案例

我的使用案例

正常狀態(tài) ：1920*929

筆記本縮放150%：1280*569

筆記本縮放175%：1098*460

可以看到，這些縮放基本上影響不到我們，看起來甚至沒有任何區(qū)別??(越看越牛逼啊鐵子們)

QA

Q：autofit.js可以做局部自適應(yīng)嗎？

A：不可以

Q：除了大屏項(xiàng)目外，autofit.js可以適配其他項(xiàng)目嗎？

A：可以，autofit.js適用于任何PC項(xiàng)目

Q：autofit.js可以向上兼容嗎

A：可以是可以，但是你看看哪個(gè)大傻子這么干？向上兼容可能會(huì)出現(xiàn)模糊的現(xiàn)象，如果你希望能在更高分辨率的屏幕上展示，還是建議按照高分辨率的設(shè)計(jì)稿開發(fā)。

Q：autofit.js會(huì)影響性能嗎？

A：會(huì)，但是微乎其微，如果你不希望autofit.js過多的干預(yù)dom，可以把resize設(shè)置為false,這樣它只會(huì)在啟動(dòng)時(shí)運(yùn)行一次。

Q：autofit.js相對(duì)于其他自適應(yīng)工具有什么區(qū)別？

A：沒有什么本質(zhì)區(qū)別，autofit.js和所有使用scale方案的工具都是一個(gè)原理，只不過autofit.js多了一個(gè)自動(dòng)充滿全屏的功能，且調(diào)用比較簡單。

Q：你為什么又要重復(fù)造輪子？

A：看不慣那么多復(fù)雜繁多的工具，我只需要二十行代碼。

Q：使用autofit.js需要學(xué)習(xí)其他知識(shí)嗎？

A：需要個(gè)屁。文章來源地址http://www.zghlxwxcb.cn/news/detail-447787.html

到了這里，關(guān)于這款全自動(dòng)自適應(yīng)工具你用過了嗎？autofit.js請(qǐng)求加入你的戰(zhàn)場！的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！