Postcss plugin rpx2vw

Transform rpx to vw.

Install

1$ npm install --save postcss-plugin-rpx2vw

Example

Input

1.a {
2  margin: -10rpx .5vh;
3  padding: 5vmin 9.5rpx 1rpx;
4  border: 3rpx solid black;
5  border-bottom-width: 1rpx;
6  font-size: 14rpx;
7  line-height: 20rpx;
8}
9
10.b {
11  border: 1rpx solid black;
12  margin-bottom: 1rpx;
13  font-size: 20rpx;
14  line-height: 30rpx;
15}
16
17@media (min-width: 750rpx) {
18  .c {
19    font-size: 16rpx;
20    line-height: 22rpx;
21  }
22}

Output

1.a {
2  margin: -1.33333vw .5vh;
3  padding: 5vmin 1.26667vw 0.13333vw;
4  border: 0.4vw solid black;
5  border-bottom-width: 0.13333vw;
6  font-size: 1.86667vw;
7  line-height: 2.66667vw;
8}
9
10.b {
11  border: 0.13333vw solid black;
12  margin-bottom: 0.13333vw;
13  font-size: 2.66667vw;
14  line-height: 4vw;
15}
16
17@media (min-width: 100vw) {
18  .c {
19    font-size: 2.13333vw;
20    line-height: 2.93333vw;
21  }
22}

Usage

Default Options:

1{
2  viewportWidth: 750,
3  viewportUnit: 'vw',
4  fontViewportUnit: 'vw',
5  unitPrecision: 5,
6}

• viewportWidth The width of the viewport.
• viewportUnit Expected unit.
• fontViewportUnit Expected font unit.
• unitPrecision The decimal point is exact to several digits.

1const PostcssPluginRpxToVw = require('postcss-plugin-rpx2vw');
2
3postcss([ PostcssPluginRpxToVw ]);

Contributing

Want to file a bug, contribute some code, or improve documentation? Excellent! Read up on our guidelines for contributing.