大屏可视化适配方案--简单

木子“

已于 2024-05-08 16:42:02 修改

阅读量3k

点赞数

文章标签： html5

于 2023-09-01 17:39:59 首次发布

本文链接：https://blog.youkuaiyun.com/m0_67350312/article/details/132628292

版权

为大家介绍一个非常好用的大屏解决方案——autofit.js。

可根据窗口大小进行自动适配。

官网地址：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