这个插件使用以后,页面会根据浏览器的缩放自适应的改变宽高
这里演示的是vue3项目,其他项目也可类似去写
1.安装
npm install autofit.js
2.使用
如果要在整个项目做自适应,将配置配到App.vue,如果只要单个页面自适应,只需要配置当前页面即可
App.vue配置如下(单个页面自适应也是如此配置)
以下代码三步走
<script>
// 1.引入插件
import autofit from "autofit.js"
import { onMounted , onBeforeUnmount } from "vue"
import './assets/icon/iconfont.css'
export default {
name: 'App',
setup () {
// 2.因为要操作dom,所以必须在组件渲染完毕的生命周期onMounted里面配置
// 具体配置的选项介绍在博客最下面
onMounted(() => {
autofit.init({
dh: 1080,
dw: 1920,
el: "#app",
resize: true
},
false
)
})
// 3. 如果是单个页面做自适应,需要在页面销毁后删除插件,不然可能会影响其他页面,为了保险个人建议App.vue也加上组件销毁的生命周期
onBeforeUnmount (()=>{
autofit.off()
})
}
}
</script>
<template>
<router-view></router-view>
</template>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0;
min-width: 1280px;
}
#app {
overflow: hidden;
width: 100%;
height: 100%;
min-width: 1280px;
}
</style>
3.具体配置
* - el:渲染的dom,默认是 "#app",必须使用id选择器
* - dw:设计稿的宽度,默认是 1920
* - dh:设计稿的高度,默认是 929 ,如果项目以全屏展示,则可以设置为1080
* - resize:是否监听resize事件,默认是 true
* - ignore:忽略缩放的元素(该元素将反向缩放),参数见readme.md
* - transition:过渡时间,默认是 0
* - delay:默认是 0
4.忽略某些元素
autofit.init({
ignore: [
{
el: ".gaodeMap",
},
]
})
传入 ignore 以使元素不被缩放