Skip to content

myour-cc/bee-flex

Repository files navigation

bee-flex

弹性布局,通过设置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为浏览器窗口信息

configs

属性 类型 解释
design number 设计稿宽度
max number 最大宽度

options

属性 类型 解释
design number 设计稿宽度
width number 浏览器当前视口宽度
height number 浏览器当前视口高度
rem number 当前rem值

更多

需要添加功能或者存在 bug 请提交 issues,在空余时间会尽快处理。