KeepFit

指定一个DOM节点，使其按照 宽度/高度/两者 为基准的缩放方式，或按100px = 1rem的规则，来适应浏览器窗口尺寸。通常用于按照数据可视化大屏设计图进行的前端开发，针对不同尺寸和比例显示设备的自适应。

引用 - Install

ES5

<script src="keepfit.min.js"></script>

AMD

require(['keepfit'], (keepfit)=>{ /* code here */ })

CMD

const keepfit = require('./keepfit')

NPM

npm install keepfit

文档 - Document

keepfit(target, options);

| 参数 | 类型 | 值 | 描述 | |-----------------|--------|------------------------------------|-------------------------| | target | object | document.body | DOM元素节点 | | options | object | { size, mode, fit, align, lock } | 参数 | | options.mode | string | 'scale', 'rem' | 默认: scale (v3) | | options.size | array | [1920, 1080] | 设计图尺寸 |

Scale Mode

| 参数 | 类型 | 值 | 描述 | |------------------|--------|---------------------------------|-------------------------| | options.fit | string | 'width', 'height', 'both' | scale: 缩放基准 | | options.align | string | 'center', 'top center' | scale: 缩放中心点 | | options.lock | string | true, false | 锁定屏幕方向 (v3) | | options.px2rem | string | 100 | 兼容基于rem模式的缩放 |

Rem Mode

| 参数 | 类型 | 值 | 描述 | |-------------------|--------|---------|-------------------------------------| | options.px2rem | string | 100 | 100px = 1rem (不建议修改此值) |

示例 - Use

// 缩放模式
keepfit(document.querySelector('#app'), {
    size: [1920, 1080],
    mode: 'scale',
    fit: 'both',
    align: 'center top'
});


// rem模式
// 100px = 1rem，窗口尺寸变化时会自动计算 html 的 font-size 值
keepfit(document.querySelector('#app'), {
    mode: 'rem',
    size: [1920, 1080]
});

注意 - Tips

• 默认采用缩放模式，此时页面中CSS单位可放心使用px
• 使用rem模式时，fit和align参数将被忽略，需要按照100px = 1rem规则编写css
• 如有疑惑，请参考samples目录中的案例