1.1.5 • Published 3 years ago
rem-like-rpx v1.1.5
readme
根据窗口宽度动态计算rem依赖的根节点fontsize数值, 字体大小, 默认 1rem = 1px
插件中默认将body的font-size改为16px,以防其他元素继承html元素font-size值
tips
-单页面应用使用时需要在dom挂载前初始化,以防止css计算时没有应用到正确的rem,虽然可以在dom挂载后调用一次calc方法但是大概率会有闪屏等现象
例子
import Rpx from 'rem-like-rpx'
new Rpx({
    rate: 1,
    designWidth: 750,
    maxWidth: 750,
    minWidth: 320
});可以添加窗口监听事件配合媒体查询进行多屏幕尺寸(宽窄屏幕)适配
const rpx = new Rpx({
    designWidth: 1980,
    maxWidth: 19800,
    minWidth: 750
});
window.addEventListener('resize', this.handleSizeChange.bind(this, rpx))
handleSizeChange(rpx) {
   if (window.innerWidth < 1000) {
       rpx.config.designWidth = 375
       rpx.config.maxWidth = 600
       rpx.config.minWidth = 100
 
       rpx.calc()
   } else {
       rpx.config.designWidth = 1980
       rpx.config.maxWidth = 19800
       rpx.config.minWidth = 1000
       
       rpx.calc()
   }
},options
| Name | Type | Default | Description | 
|---|---|---|---|
| calc | function | function | 计算新的rem值 依赖config和窗口offsetWidth | 
| rate | number | 1 | 字体大小, 默认 1rem = 100px | 
| designWidth | number | 750 | 设计稿的宽度 | 
| maxWidth | number | -1 | 设置支持缩放的最大宽度 | 
| minWidth | number | -1 | 设置支持缩放的最小宽度 | 
| resizeWait | number | 20 | 节流器等待时间 |