使用autofit.js自适应页面尺寸,浏览器缩放自适应,pc/大屏自适应方案
autofit.js
迄今为止最易用的自适应工具
理论上可以支持从你的设计稿以下的分辨率,只需一行代码。
autofit.js是一个可以让你的PC项目自适应屏幕的工具,其原理非常简单,即在scale等比缩放的基础上,向右或向下增加了宽度或高度,以达到充满全屏的效果,使用autofit.js不会挤压、拉伸元素,它只是单纯的设置了容器的宽高。
import autofit from 'autofit.js'
autofit.init({
dh: 1080, //尺寸
dw: 1920, //尺寸
el:"#app", //元素id
// ignore:[{
// el: '#ignore-header',
// height: '50px'
// }],
resize: true
})
- el:渲染的dom,默认是 "body",必须使用id选择器
- dw:设计稿的宽度,默认是 1920
- dh:设计稿的高度,默认是 1080
- resize:是否监听resize事件,默认是 true
- ignore:忽略缩放的元素(该元素将反向缩放),参数见readme.md
- transition:过渡时间,默认是 0
- delay:默认是 0
- limit:默认是 0.1,当缩放阈值不大于此值时不缩放,比如设置为0.1时,0.9-1.1的范围会被重置为1