前端大屏适配来了

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

autofit.js是一个可以让你的PC项目自适应屏幕的工具，其原理非常简单，即在scale等比缩放的基础上，向右或向下增加了宽度或高度，以达到充满全屏的效果，使用autofit.js不会挤压、拉伸元素，它只是单纯的设置了容器的宽高。

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

官网地址：autofit.js | 最易用的自适应工具

下面是使用方法

1.npm下载 npm i autofit.js

2.在项目中引入 import autofit from 'autofit.js'

3.init(）初始化，注意：要在mounted（）里 export default {
mounted() { autofit.init({ dh: 1080, dw: 1920, el:"#app", resize: true },false) // 可关闭控制台运行提示输出 }, }

以上三步，大屏适配就已经完成了。

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

• • el：渲染的dom，默认是 "#app"，必须使用id选择器
• • dw：设计稿的宽度，默认是 1920
• • dh：设计稿的高度，默认是 929 ，如果项目以全屏展示，则可以设置为1080
• • resize：是否监听resize事件，默认是 true
• • ignore：忽略缩放的元素（该元素将反向缩放），参数见readme.md
• • transition：过渡时间，默认是 0
• • delay：默认是 0

忽略某些元素

autofit.init({
  ignore: [
     { 
      el: ".gaodeMap",
     },
  ]
})

传入 ignore 以使元素不被缩放

更个性化的设置：

autofit.init({
  ignore: [
    {
      el: ".gaodeMap", //必填
      height: "300px",//可选，需注明单位
      width: "80%",//可选，需注明单位
      scale:1.2, //可选：回放程度，基于主元素缩放后的大小
      fontSize:26 //可选，如果自定义缩放后文字大小不合适，可以在这里设置文字大小
    },
    {
        //...
    }
  ]
})

如有更好方案，欢迎留言补充...