px2rpx

According to one stylesheet, generate rpx version and @1x, @2x and @3x stylesheet

  • px2rpx

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
px2rpx
1400.5.36 years ago6 years agoMinified + gzip package size for px2rpx in KB

Readme

px2rpx
According to one stylesheet, generate rpx version and @1x, @2x and @3x stylesheet.
!NPM versionnpm-imagenpm-url !Downloadsdownloads-imagedownloads-url
This set of tools contains:

Usage

The raw stylesheet only contains @2x style, and if you
  • don't intend to transform the original value, eg: 1px border, add /*no*/ after the declaration
  • intend to use px by force,eg: font-size, add /*px*/ after the declaration

Attention: Dealing with SASS or LESS, only /*...*/ comment can be used, in order to have the comments persisted

CLI tool

$ npm install -g px2rpx
$ px2rpx -o build src/*.wxss

Usage: px2rpx [options] <file...>

Options:

  -h, --help                      output usage information
  -V, --version                   output the version number
  -u, --rpxUnit [value]           set `rpx` unit value (default: 75)
  -x, --threeVersion [value]      whether to generate @1x, @2x and @3x version stylesheet (default: false)
  -r, --rpxVersion [value]        whether to generate rpx version stylesheet (default: true)
  -b, --baseDpr [value]           set base device pixel ratio (default: 2)
  -p, --rpxPrecision [value]      set rpx value precision (default: 6)
  -o, --output [path]             the output file dirname

API

var Px2rpx = require('px2rpx');
var px2rpxIns = new Px2rpx([config]);
var originCssText = '...';
var dpr = 2;
var newCssText = px2rpxIns.generaterpx(originCssText); // generate rpx version stylesheet
var newCssText = px2rpxIns.generateThree(originCssText, dpr); // generate @1x, @2x and @3x version stylesheet

License

MIT