这个插件使用以后,页面会根据浏览器的缩放自适应的改变宽高
这里演示的是vue3项目,其他项目也可类似去写文章来源：https://www.toymoban.com/news/detail-765695.html
1.安装
npm install autofit.js
2.使用
如果要在整个项目做自适应,将配置配到App.vue,如果只要单个页面自适应,只需要配置当前页面即可
App.vue配置如下(单个页面自适应也是如此配置)
以下代码三步走文章来源地址https://www.toymoban.com/news/detail-765695.html
<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 以使元素不被缩放
具体配置点击看官网(纯中文还容易理解)
到了这里，关于自适应插件autofit.js使用(这里演示vue项目)的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
