为大家介绍一个非常好用的大屏解决方案——autofit.js。
可根据窗口大小进行自动适配。
下面是使用方法
1.npm下载
npm i autofit.js
2.在项目中引入
import autofit from 'autofit.js'
3.init()初始化,注意:要在mounted()里
mounted() {
autofit.init({
designHeight: 1080,//高度
designWidth: 1920,//宽度
// renderDom: '#app',
resize: true
})
}
以上三步,大屏适配就已经完成了
以上使用的是默认参数,可根据实际情况调整,可选参数有
* - el:渲染的dom,默认是 "#app",必须使用id选择器 * - dw:设计稿的宽度,默认是 1920 * - dh:设计稿的高度,默认是 929 ,如果项目以全屏展示,则可以设置为1080 * - resize:是否监听resize事件,默认是 true * - ignore:忽略缩放的元素(该元素将反向缩放),参数见readme.md * - transition:过渡时间,默认是 0 * - delay:默认是 0