这款全自动自适应工具你用过了吗？autofit.js请求加入你的战场！
前段时间做了一个自适应的小工具（autofit.js）
经过一段时间的试用，同学们发现了工具存在的一些问题，我自己也发现了一些，这篇文章是针对这些问题撰写的。
autofit.js
autofit.js是一款可以让你的项目一键自适应的工具。
安装
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元素在文档中的实际占位是不变的
这样下方就出现了白边，右侧还出现了滚动条
解决此问题将body设置超出隐藏即可：
body{
overflow: hidden;
}
在设置超出隐藏后，滚动条和白边都不见了。
#app充满了全屏，里面的元素却不能自适应位置。
出现这种问题的原因很明显，你需要将内容元素做一个简单的适配定位，因为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})`;
这样无论是怎样的宽高比，它都会同时设置宽度和高度。
使用autofit.js后，在小屏幕上字体（或元素）变得过小
造成这种问题的原因大概率是你同时使用了其他自适应工具，或者使用了相对单位，导致你的网站进行了双重适配。
解决方式也很简单，autofit.js不需要任何其他辅助工具，如果想体验autofit.js一行搞定，关闭其他插件，且不要使用任何相对单位即可！
autofit.js仅推荐使用px进行开发。
使用autofit.js后，地图事件热区偏移了
不要手动设置：transform-origin，因为autofit.js将它设置成了 0 0，即以左上角为基准点缩放，这可以保证dom元素不会偏移。
如果你使用的地图是基于canvas绘制的，那么有可能会出现偏移现象（往往伴随着拉伸），那么和上面的echarts的解决方式一样，只需要重绘就可以了。
如果是基于svg绘制的，那么不应该会出现这个问题，如果你的svg绘制的地图也出现了热区偏移现象，欢迎来私信捶我。
案例
我的使用案例
正常状态 ：1920*929
笔记本缩放150%：1280*569
笔记本缩放175%：1098*460
可以看到，这些缩放基本上影响不到我们，看起来甚至没有任何区别😄(越看越牛逼啊铁子们)
QA
Q：autofit.js可以做局部自适应吗？
A：不可以
Q：除了大屏项目外，autofit.js可以适配其他项目吗？
A：可以，autofit.js适用于任何PC项目
Q：autofit.js可以向上兼容吗
A：可以是可以，但是你看看哪个大傻子这么干？向上兼容可能会出现模糊的现象，如果你希望能在更高分辨率的屏幕上展示，还是建议按照高分辨率的设计稿开发。
Q：autofit.js会影响性能吗？
A：会，但是微乎其微，如果你不希望autofit.js过多的干预dom，可以把resize设置为false,这样它只会在启动时运行一次。
Q：autofit.js相对于其他自适应工具有什么区别？
A：没有什么本质区别，autofit.js和所有使用scale方案的工具都是一个原理，只不过autofit.js多了一个自动充满全屏的功能，且调用比较简单。
Q：你为什么又要重复造轮子？
A：看不惯那么多复杂繁多的工具，我只需要二十行代码。
Q：使用autofit.js需要学习其他知识吗？
A：需要个屁。
