# style-unit

> style-unit

Latest version **3.0.5** (published 2022-08-02) · BSD-3-Clause license · 0 weekly downloads

## Install

```sh
npm install style-unit
pnpm add style-unit
yarn add style-unit
bun add style-unit
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.5 |
| Published | 2022-08-02 |
| First published | 2017-03-24 |
| Weekly downloads | 0 |
| License | BSD-3-Clause |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 10.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8019 |
| Maintainers | zeroling, wintercn, yuanyan, fyangstudio, oraaange, yacheng, rax-publisher |

## Links

- npm: https://www.npmjs.com/package/style-unit
- Repository: https://github.com/alibaba/rax
- Homepage: https://github.com/alibaba/rax#readme
- Issues: https://github.com/alibaba/rax/issues
- npm.io page: https://npm.io/package/style-unit

## Dependencies (2)

- [universal-env](https://npm.io/package/universal-env.md) ^3.0.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.14.6

## Recent versions

- 3.0.5 (latest) — 2022-08-02
- 3.0.1-0 (beta) — 2021-01-15
- 1.0.4 (1_x) — 2019-10-01
- 3.0.4 — 2021-11-24
- 3.0.3 — 2021-06-29
- 3.0.2 — 2021-03-02
- 3.0.1 — 2021-03-02
- 3.0.0 — 2020-10-15
- 2.0.1 — 2019-11-28
- 1.0.3 — 2019-09-30
- 2.0.0 — 2019-09-30
- 2.0.0-0 — 2019-09-29
- 1.0.2 — 2019-08-13
- 1.0.1 — 2019-07-24
- 1.0.1-0 — 2019-06-20
- … 50 more at https://npm.io/package/style-unit/versions

## README

# style-unit

> Unit conversion for calculating dimensional css attributes, especially for rpx.

## API

convertUnit(value, prop, platform);

| Property | Type          | Required | Description                                                  |
| -------- | ------------- | -------- | ------------------------------------------------------------ |
| value    | string/number | true     |                                                              |
| prop     | string        | true     |                                                              |
| platform | string        | false    | Auto assignment with [universal-env](https://www.npmjs.com/package/universal-env), different platforms have different rpx conversion. Details are as follows. |

## Web 

In Web, Calculate rpx to vw (relative to viewport width 750). 

750rpx -> 100vw

### setViewportWidth

You can use `setViewportWidth` method update viewport width

setViewportWidth(1500);

750rpx -> 50vw


## Weex 

In Weex, Calculate rpx to px (viewport width is 750). 

750rpx -> 750px

### setRpx

You can use `setRpx` method update coefficient of 750

setRpx(1500 / 750)

750rpx -> 1500px

## MiniApp

rpx (responsive pixel): Adaptable to the screen width in MiniApp. The specified screen width is 750 rpx. If the screen width on iPhone6 is 375 px (750 physical pixels), then 750 rpx = 375 px = 750 physical pixels, i.e. 1 rpx = 0.5 px = 1 physical pixel.

## Node.js

Use Weex result:
```
convertUnit('500rpx', 'width', 'weex')
```
Use Web result:
```
convertUnit('500rpx', 'width', 'web')
```

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