这款全自动自适应工具你用过了吗？autofit.js请求加入你的战场！-Toy模板网

这篇具有很好参考价值的文章主要介绍了这款全自动自适应工具你用过了吗？autofit.js请求加入你的战场！。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

这款全自动自适应工具你用过了吗？autofit.js请求加入你的战场！

前段时间做了一个自适应的小工具（autofit.js）

经过一段时间的试用，同学们发现了工具存在的一些问题，我自己也发现了一些，这篇文章是针对这些问题撰写的。

autofit.js

autofit.js是一款可以让你的项目一键自适应的工具。

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的设计稿开发时，直接调用autofit.init() 即可。插件会自动计算缩放后撑满浏览器窗口所需的宽高。

解决问题

使用了autofit.js依然出现了白边

因为autofit.js使用的是scale方案，transform: scale() 缩放时，dom元素在文档中的实际占位是不变的

这款全自动自适应工具你用过了吗？autofit.js请求加入你的战场！

这样下方就出现了白边，右侧还出现了滚动条

解决此问题将body设置超出隐藏即可：

body{
    overflow: hidden;
}

这款全自动自适应工具你用过了吗？autofit.js请求加入你的战场！

在设置超出隐藏后，滚动条和白边都不见了。

#app充满了全屏，里面的元素却不能自适应位置。

这款全自动自适应工具你用过了吗？autofit.js请求加入你的战场！

出现这种问题的原因很明显，你需要将内容元素做一个简单的适配定位，因为autofit.js只做了缩放和填充部分。如果你的页面元素没有做均匀分布的位置，也是会出现这种情况的。

以上图为例

如果出现了这个问题，推荐使用flex进行布局即可。

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

或者直接使用定位，将三块内容定位到左上、中间、右上。

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

手动缩放浏览器窗口时，echarts图表被拉伸了

这个问题按说不会是因为autofit.js引起的（前提是你没有使用百分比），但是既然有人提到了，这里说一下解决办法。

echarts图表拉伸，说明你的echarts外层容器变大或者变小的，导致canvas元素拉伸了，解决办法为：

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

像我这样，监听resize事件，并重绘echarts即可。

手动缩放浏览器可以正常适应，点击最大化（或F11全屏）时却失效了

这个问题属于autofit.js的一个bug，目前在最新版本已经修复了。

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

造成这个bug的原因是，全屏时的宽高比不小于（因为是等于）设计图宽高比，导致高度没有被重新设置。

所以在曾经设置过高度（即基于宽度px不变的缩放），再最大化的情况，高度不会变。在这种逻辑下，宽度有时也会失效。

修改后的代码（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})`;

这样无论是怎样的宽高比，它都会同时设置宽度和高度。