时间 | 版本 | 描述 |
---|---|---|
2023-04-16 | v1.0.0 | 第一个版本发布 🥳 |
2023-04-23 | v1.0.9 | 解决最大化、f11全屏后失效的问题 |
2023-05-12 | v1.1.2 | 新增忽略元素功能(地图热区事件偏移解决)👍 |
autofit.js 这是一款可以使你的项目一键自适应的工具 (原vue-autofit)
理论上可以支持从你的设计稿以下的分辨率。
import autofit from 'autofit.js'
autofit.init()
默认参数为1920*929(即去掉浏览器头的1080), 直接调用即可
export default {
mounted() {
autofit.init({
designHeight: 1080,
designWidth: 1920,
renderDom:"#app",
resize: true
},false) // 可关闭控制台运行提示输出
},
}
以上使用的是默认参数,可根据实际情况调整,参数分别为
* - renderDom(可选):渲染的dom,默认是 "#app",必须使用id选择器 * - designWidth(可选):设计稿的宽度,默认是 1920 * - designHeight(可选):设计稿的高度,默认是 929 ,如果项目以全屏展示,则可以设置为1080 * - resize(可选):是否监听resize事件,默认是 true
autofit.init({
ignore: [
{
dom: ".gaodeMap",
},
]
})
传入 ignore
以使元素不被缩放(自动反向缩放)
更个性化的设置:
autofit.init({
ignore: [
{
dom: ".gaodeMap", //必填
height: "300px;",//可选
width: "300px;",//可选
scale:1.2 //可选:回放程度,基于主元素缩放后的大小
},
{
//...
}
]
})
如果反向缩放后的元素大小使结构发生变化,你还可以手动传入宽高、回放程度。