- webpack loader pxtovw-loader
- postcss plugin https://www.npmjs.com/package/pxtovw-postcss
px convert vw 将px 转成 vw
-w, --viewportWidth [value]', 'set `vw` unit value (default: 750)'
-o, --output [path]", "the output file dirname")
-p, --vwPrecision [value]', 'set vw value precision (default: 6)'
-u, --unitToConvert [value]", "set need to convert unit (default: 'px')"
-m, --minPixelValue [value]", "mix convert px value (default: 1)"
-w, --viewportWidth [value]', '设置视窗宽度 (默认: 750)'
-o, --output [path]", "设置输出路径")
-p, --vwPrecision [value]', '设置转换为vw 的保留小数位数 (default: 6)'
-u, --unitToConvert [value]", "设置需要转换的单位 (default: 'px')"
-m, --minPixelValue [value]", "最小转换数值 (default: 1)"
const Pxtovw = require("../pxtovw");
const config = {
viewportWidth: 750,
unitPrecision: 6,
unitToConvert: "px",
minPixelValue: 1,
};
const pxtovwIns = new Pxtovw(config);
const vwCssText = pxtovwIns.converPxToVw('.....')
npm install pxtovw -g
pxtovw [filename].css -w 750 -o ./out -p 6 -u px -m 1
input test css file test.css
.testcase {
height: 100px;
width: 100px;
border-radius: 20px;
padding: 10px 10px 10px!important;
margin: 10px;
font-size: 16px;
background-color: bisque;
}cli
pxtovw test.css -o ./
output css file test.vw.css
.testcase {
height: 13.333333vw;
width: 13.333333vw;
border-radius: 2.666667vw;
padding: 1.333333vw 1.333333vw 1.333333vw!important;
margin: 1.333333vw;
font-size: 2.133333vw;
background-color: bisque;
}Calculation
// height 100px
//cover vw keep 6 precision
const vwHeight = (100/750)*100 //13.333333
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent