6

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

 1 year ago
source link: https://www.cnblogs.com/Kay-Larry/p/17408513.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
autofit

前段时间做了一个自适应的小工具（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元素在文档中的实际占位是不变的

image-20230509153118546
image-20230509154838230

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

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

body{
    overflow: hidden;
}
image-20230509154748146

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

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

image-20230509153540023

出现这种问题的原因很明显，你需要将内容元素做一个简单的适配定位，因为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绘制的地图也出现了热区偏移现象，欢迎来私信捶我。

我的使用案例

image-20230509161123956

正常状态 ：1920*929

image-20230509161241362

笔记本缩放150%：1280*569

image-20230509162849861

笔记本缩放175%：1098*460

可以看到，这些缩放基本上影响不到我们，看起来甚至没有任何区别😄(越看越牛逼啊铁子们)

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：需要个屁。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK