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

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

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

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

posted @ 2023-05-17 13:41  加伊bky  阅读(2028)  评论(0编辑  收藏  举报