最简单的大屏适配解决方案—autofit.js

本文介绍: 在工作开发当中，我们避免不了要去做大屏。那么做大屏其实最难的点和最核心的问题就是适配，下面为大家介绍最好用的大屏解决方案——autofit.js。以上使用的是默认参数，可根据实际情况调整，参数分别为* – renderDom（可选）：渲染的dom，默认是 “#app“，必须使用 id 选择器* – designWidt h（可选）：设计稿的宽度，默认是 1920* – designHeig h t（可选）：设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080。

在工作开发当中，我们避免不了要去做大屏。那么做大屏其实最难的点和最核心的问题就是适配，

下面为大家介绍最好用的大屏解决方案——autofit.js。

“一行 代码搞定，开袋即食！！！”

效果图展示，可根据窗口大小进行自动适配。

使用 方法：

1.npm 下载：

npm i autofit.js

2.项目中引入使用：

import autofit from 'autofit.js'

3.init(）初始化加载：注意一定要在mounted 里面使用，因为要在dom挂在完成生效！！！

  mounted() {
	autofit.init({
        designHeight: 1080,
        designWidth: 1920,
        renderDom:"#app",
        resize: true
    },false) // 可关闭控制台运行提示输出
  },

以上使用的是默认参数，可根据实际情况调整，参数分别为

   * - renderDom（可选）：渲染的dom，默认是 "#app"，必须使用id选择器 
   * - designWidth（可选）：设计稿的宽度，默认是 1920 
   * - designHeight（可选）：设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080
   * - resize（可选）：是否监听resize事件，默认是 true