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

标签: none

添加新评论