rpx-to-viewport
A plugin for PostCSS. Convert rpx units (h5/mini-program/mpvue) to viewport units (vw or vmin vmax vh)
purpose
- for h5、mini-program、mpvue and so on
- write css unit the same as your layout (Example: 750px width layout = 750rpx)
Usage
npm install postcss-rpx-to-viewport --save-dev
Use with gulp
var gulp = ;var postCss = ;var rpxToViewport = ; gulp;
Use with webpack & vue
var rpxToViewport = ; // webpack config: module: rules: test: /\.vue$/ use: loader: 'vue-loader' options: postcss:
Use with webpack & react
var rpxToViewport = ; // webpack config: module: { return ; }
Example
/* input : Suppose your layout width is 750px */ { /* suggest use px */} /* output */ { /* if use rpx and set mediaQuery===true */}
Options
Default:
targetUnit: 'rpx' // (String) need convert outputUnit: 'vw' // (String) convert to layoutWidth: 750 // (Number) design draft width unitPrecision: 5 // (Number) the decimal numbers mediaQuery: false // (Boolean) convert the unit inside @media(*)