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

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

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