经过一段时间的试用,同学们发现了工具存在的一些问题,我自己也发现了一些,这篇文章是针对这些问题撰写的。
autofit.js
autofit.js npm 主页
安装
npm i autofit.js
使用
import autofit from 'autofit.js'
autofit.init({
designHeight: 929,
designWidth: 1920,
renderDom:"#app",
resize: true
}
一般按照1080的设计稿开发时,直接调用autofit.init(
即可。插件会自动计算缩放后撑满浏览器窗口所需的宽高。
解决问题
使用了autofit.js依然出现了白边
transform: scale( 缩放时,dom元素在文档中的实际占位是不变的
解决此问题将body设置超出隐藏即可:
body{
overflow: hidden;
}
#app充满了全屏,里面的元素却不能自适应位置。
以上图为例
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引起的(前提是你没有使用百分比),但是既然有人提到了,这里说一下解决办法。
window.addEventListener('resize', this.redraw, false;
redraw( {
this.myChart.clear(;
this.myChart.resize(;
this.draw(;
},
像我这样,监听resize事件,并重绘echarts即可。
手动缩放浏览器可以正常适应,点击最大化(或F11全屏)时却失效了
造成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的原因是,全屏时的宽高比不小于(因为是等于)设计图宽高比,导致高度没有被重新设置。
修改后的代码(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后,地图事件热区偏移了
不要手动设置:transform-origin,因为autofit.js将它设置成了 0 0
,即以左上角为基准点缩放,这可以保证dom元素不会偏移。
如果是基于svg绘制的,那么不应该会出现这个问题,如果你的svg绘制的地图也出现了热区偏移现象,欢迎来私信捶我。
案例
可以看到,这些缩放基本上影响不到我们,看起来甚至没有任何区别😄(越看越牛逼啊铁子们
QA
A:不可以
A:可以,autofit.js适用于任何PC项目
A:可以是可以,但是你看看哪个大傻子这么干?向上兼容可能会出现模糊的现象,如果你希望能在更高分辨率的屏幕上展示,还是建议按照高分辨率的设计稿开发。
A:会,但是微乎其微,如果你不希望autofit.js过多的干预dom,可以把resize设置为false,这样它只会在启动时运行一次。
A:没有什么本质区别,autofit.js和所有使用scale方案的工具都是一个原理,只不过autofit.js多了一个自动充满全屏的功能,且调用比较简单。
A:看不惯那么多复杂繁多的工具,我只需要二十行代码。
A:需要个屁。