1.1.5 • Published 1 year 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 | 节流器等待时间 |