Keepfit NPM | npm.io

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]
});