1.1.5 • Published 1 year ago

rem-like-rpx v1.1.5

Weekly downloads
-
License
ISC
Repository
-
Last release
1 year ago

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

NameTypeDefaultDescription
calcfunctionfunction计算新的rem值 依赖config和窗口offsetWidth
ratenumber1字体大小, 默认 1rem = 100px
designWidthnumber750设计稿的宽度
maxWidthnumber-1设置支持缩放的最大宽度
minWidthnumber-1设置支持缩放的最小宽度
resizeWaitnumber20节流器等待时间
1.1.1

1 year ago

1.1.0

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.0.2

1 year ago

1.0.1

1 year ago

1.0.0

2 years ago