弹性布局,通过设置html
节点font-size
并采用rem
单位实现响应布局
可单独使用或配合vue
等前后端分离框架使用,支持typescript
以REM布局优点是不用复杂计算字体大小和元素尺寸,设计尺寸以750
为例,元素尺寸在设计稿的基础上除以100
冠以rem
尺寸即可,文本字号不建议自适应(具体原因可自行了解),字号工具设计稿dpr转换为css逻辑像素,使用方便
- install
npm install bee-flex
# or
cnpm install bee-flex
# or
yarn add bee-flex
import beeflex from 'bee-flex'
- cdn
<script src="https://unpkg.com/bee-flex@1.1.2/build"></script>
// beeflex(design,callback)
beeflex({
design:750
},(options)=>{
console.log(options)
})
属性 | 类型 | 解释 |
---|---|---|
config | object | 配置 |
callback | function | 回调函数,options为浏览器窗口信息 |
属性 | 类型 | 解释 |
---|---|---|
design | number | 设计稿宽度 |
max | number | 最大宽度 |
属性 | 类型 | 解释 |
---|---|---|
design | number | 设计稿宽度 |
width | number | 浏览器当前视口宽度 |
height | number | 浏览器当前视口高度 |
rem | number | 当前rem值 |
需要添加功能或者存在 bug
请提交 issues
,在空余时间会尽快处理。