中文文档传送门

This set of tools contains:

• a CLI tool(@todo)
• Gulp plugin(@todo)
• Webpack loader
• Postcss plugin(@todo)

If you don't intend to transform the original value, eg: 1px border, add /*no*/ after the declaration

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

const Px2scalability = require('px2scalability')
const px2scalabilityIns = new Px2scalability()
const originCssText = '...';
px2scalabilityIns.init(originCssText, 'px2vw')

One raw stylesheet: test.css

.selector {
  width: 750px;
  height: 75px; 
  font-size: 15px;
  border: 1px solid #ddd; /*no*/
}

vw version: test.vw.css

.selector {
  width: 100vw;
  height: 10vw; 
  font-size: 2vw;
  border: 1px solid #ddd; /*no*/
}

rem version: test.rem.css

.selector {
  width: 10rem;
  height: 1rem; 
  font-size: .2rem;
  border: 1px solid #ddd; /*no*/
}

px2scalabilityIns.init({
  pageWidth: 750, // {Number}
  precision: 6, // {Number}
  keepComment: 'no' // {String}
}, Type)

• pageWidth: 750 : Design draft width, default value: 750
• precision: 6 : Precision, default value: 6
• keepComment: no : The code won't convert if this flag in comments is detected

• px2vw : Transform px unit to vw unit
• px2rem : Transform px unit to rem unit
• vw2rem : Transform vw unit to rem unit
• rem2vw : Transform rem unit to vw unit

CHANGELOG

MIT