# rem-like-rpx

> fix

Latest version **1.1.5** (published 2023-02-21) · ISC license · 0 weekly downloads

## Install

```sh
npm install rem-like-rpx
pnpm add rem-like-rpx
yarn add rem-like-rpx
bun add rem-like-rpx
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.5 |
| Published | 2023-02-21 |
| First published | 2022-08-26 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | lcbaixiaobai |

## Links

- npm: https://www.npmjs.com/package/rem-like-rpx
- npm.io page: https://npm.io/package/rem-like-rpx

## Dependencies (1)

- [typescript](https://npm.io/package/typescript.md) ^4.9.5

## Recent versions

- 1.1.5 (latest) — 2023-02-21
- 1.1.4 — 2023-02-21
- 1.1.3 — 2023-02-20
- 1.1.2 — 2023-02-16
- 1.1.1 — 2023-02-16
- 1.1.0 — 2023-02-16
- 1.0.2 — 2022-12-26
- 1.0.1 — 2022-12-26
- 1.0.0 — 2022-08-26

## README

# 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       | 节流器等待时间                         |

---
_Source: https://npm.io/package/rem-like-rpx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._