style-unit

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