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, 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')