Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/larryzhu-dev/autofit.js
autofit.js 迄今为止最易用的自适应工具
https://github.com/larryzhu-dev/autofit.js
fit react self-adaption vue
Last synced: about 1 month ago
JSON representation
autofit.js 迄今为止最易用的自适应工具
- Host: GitHub
- URL: https://github.com/larryzhu-dev/autofit.js
- Owner: LarryZhu-dev
- License: mit
- Created: 2023-04-20T05:10:10.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-09-30T08:13:38.000Z (about 1 month ago)
- Last Synced: 2024-10-09T16:43:27.018Z (about 1 month ago)
- Topics: fit, react, self-adaption, vue
- Language: JavaScript
- Homepage: https://larryzhu-dev.github.io/autoLarryPages/autofit.js/
- Size: 290 KB
- Stars: 1,412
- Watchers: 6
- Forks: 148
- Open Issues: 6
-
Metadata Files:
- Readme: readme.en.md
- License: LICENSE
Awesome Lists containing this project
README
autofit.js
[简体中文](./readme.md) | 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\:
```js
autofit.init({
ignore: ['.leaflet', '.gaodemap']
})
```
Now, `ignore` supports width and height with other units:
```js
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:
```shell
npm i [email protected]
```
### 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
```js
import autofit from 'autofit.js'
```
### Quick Start
```js
autofit.init()
```
> The default parameters are 1920 * 929 (i.e., 1080 minus the browser header). Just call it directly.
### Usage
```js
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:
>
> ```js
> * - 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
```js
autofit.init({
ignore: [
{
el: ".gaodeMap",
},
]
})
```
Pass in `ignore` to exclude elements from scaling.
More personalized settings:
```js
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:
```js
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")`.
```js
import { elRectification } from 'autofit.js'
```
```html
```
```js
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.
```js
autofit.off()
```