stone009 / autofit.js Goto Github PK

简体中文 | English

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

字段变化：designWidth > dw designHeight > dh renderDom > el

v2.0.5 版本是最后一个兼容版本，之后将只支持新字段

autofit.js 这是一款可以使你的项目一键自适应的工具 (原vue-autofit)

理论上可以支持从你的设计稿以下的分辨率。

import autofit from 'autofit.js'

autofit.init()

默认参数为1920*929（即去掉浏览器头的1080）, 直接调用即可

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.6
   * - delay：默认是 1000

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

传入 ignore 以使元素不被缩放

更个性化的设置：

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

如果反向缩放后的元素大小使结构发生变化，你还可以手动传入宽高、回放程度。

一些canvas渲染的图表也会有事件偏移，而图表不同于地图，当使用ignore时，过大的图表可能会显示不全，因此可以使用elRectification （性能上不如ignore）

如果ignore无法满足需求，可以使用 autofit.elRectification(".classNameOrId")

import { elRectification } from 'autofit.js'

<div class="G2plot"></div>
<div class="G2plot"></div>
<div class="G2plot"></div>

onMounted(() => {
  elRectification(".G2plot")
})

使用 elRectification 时，需要被矫正的元素已经挂载

autofit.off()