使用autofit.js自适应页面尺寸,浏览器缩放自适应,pc/大屏自适应方案

在这里插入图片描述
一、安装autofit.js

npm install autofit.js

二、页面中使用

import autofit from 'autofit.js'//引入

//初始化

mounted() {
  autofit.init({
        designHeight: 1080,//尺寸
        designWidth: 1920,//尺寸 1920为例
        renderDom:"#app",//元素id
        resize: true,
         ignore: [//忽略某个元素
		     { 
		      el: ".gaodeMap",
		     },
		  ]
    })
  },
//renderDom(可选):渲染的dom,默认是 "#app",必须使用id选择器
//designWidth(可选):设计稿的宽度,默认是 1920
//designHeight(可选):设计稿的高度,默认是 929 ,如果项目以全屏展示,则可以设置为1080
//resize(可选):是否监听resize事件,默认是 true
//ignore:忽略缩放的元素(该元素将反向缩放),参数见readme.md
//transition:过渡时间,默认是 0

使用autofit.js自适应页面尺寸,浏览器缩放自适应,pc/大屏自适应方案_第1张图片

你可能感兴趣的:(前端,javascript,前端,开发语言)