首页 前端知识 自适应插件autofit.js使用(这里演示vue项目)

自适应插件autofit.js使用(这里演示vue项目)

2024-02-04 21:02:54 前端知识 前端哥 367 598 我要收藏

这个插件使用以后,页面会根据浏览器的缩放自适应的改变宽高
这里演示的是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 以使元素不被缩放

具体配置点击看官网(纯中文还容易理解)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/1293.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!