autofit.js

简体中文 | English

autofit.js is a tool for making your PC projects responsive to the screen. Its principle is very simple: based on scaling with equal proportions, it increases the width or height to the right or bottom to achieve a full-screen effect. Using autofit.js does not compress or stretch elements; it simply sets the width and height of the container.

v3.0.0 New Version Introduction

Now, ignore can be passed as an Array<string>:

autofit.init({
	ignore: ['.leaflet', '.gaodemap']
})

Now, ignore supports width and height with other units:

autofit.init({
	ignore: [{
    	el: '.gaodemap',
        width: "80%",
        height: '200px'
    }]
})

Starting from v3.0.0 (inclusive), the parameters designWidth, designHeight, and renderDom will no longer be compatible. For field changes, please see the following text. In ignore, both the el and dom parameters (as well as the string format) are still compatible.

Field changes: designWidth > dw, designHeight > dh, renderDom > el

Version 2.0.5 is the last compatible version; afterwards, only the new fields will be supported.

Install the old version:

npm i autofit.js@2.0.5

autofit.js

autofit.js is a tool that allows your project to be responsive with just one click.

In theory, it can support resolutions lower than your design draft.

Import

import autofit from 'autofit.js'

Quick Start

autofit.init()

The default parameters are 1920 * 929 (i.e., 1080 minus the browser header). Just call it directly.

Usage

export default {  
  mounted() {
	autofit.init({
        dh: 1080,
        dw: 1920,
        el: "body",
        resize: true
    }, false) // You can disable console prompt output
  },
}

The above example uses the default parameters, which can be adjusted according to the actual situation. The optional parameters are:

   * - el: The rendering DOM, default is "body", must use an id selector 
   * - dw: Design draft width, default is 1920 
   * - dh: Design draft height, default is 1080
   * - resize: Whether to listen for resize events, default is true
   * - ignore: Elements to be ignored in scaling (these elements will be inversely scaled), parameters can be found in readme.md
   * - transition: Transition time, default is 0
   * - delay: Default is 0

Ignoring Certain Elements

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

Pass in ignore to exclude elements from scaling.

More personalized settings:

autofit.init({
  ignore: [
    {
      el: ".gaodeMap", // Required
      height: "300px", // Optional
      width: "80%", // Optional
      scale: 1.2, // Optional: playback degree, based on the size of the main element after scaling
      fontSize: 26 // Optional, if the custom scaled text size is not suitable, you can set the font size here
    },
    {
        //...
    }
  ]
})

If the size of the element after inverse scaling changes the structure, you can manually pass the width, height, and playback degree.

ignore also supports passing string arrays:

autofit.init({
  ignore: ['.gaodeMap', '.leaflet', '#someElementClassOrId']
})

elRectification

Some charts rendered using canvas may also have event offsets. Unlike maps, large charts may not be fully displayed when using ignore. In this case, you can use elRectification (not as efficient as ignore).

If ignore does not meet the requirements, you can use autofit.elRectification(".classNameOrId").

import { elRectification } from 'autofit.js'

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

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

When using elRectification, the element to be rectified must already be mounted.

Disabling the Impact of autofit.js

When autofit is not initialized, an error will occur if the element cannot be found. Before using autofit.off(), make sure it has been initialized.

autofit.off()