https://github.com/flonny/pxtovw
px to vw cli
https://github.com/flonny/pxtovw
px px-to-vw px2vw pxtovw rem vw
Last synced: 8 months ago
JSON representation
px to vw cli
- Host: GitHub
- URL: https://github.com/flonny/pxtovw
- Owner: flonny
- Created: 2020-06-21T17:17:29.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T11:13:33.000Z (over 3 years ago)
- Last Synced: 2023-03-07T23:59:53.556Z (over 3 years ago)
- Topics: px, px-to-vw, px2vw, pxtovw, rem, vw
- Language: CSS
- Homepage:
- Size: 1.19 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## pxtovw
> - webpack loader [pxtovw-loader](https://www.npmjs.com/package/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)"
```
## API
```
const Pxtovw = require("../pxtovw");
const config = {
viewportWidth: 750,
unitPrecision: 6,
unitToConvert: "px",
minPixelValue: 1,
};
const pxtovwIns = new Pxtovw(config);
const vwCssText = pxtovwIns.converPxToVw('.....')
```
## use cli
```
npm install pxtovw -g
pxtovw [filename].css -w 750 -o ./out -p 6 -u px -m 1
```
## Example
input test css file test.css
```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
```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
```javascript
// height 100px
//cover vw keep 6 precision
const vwHeight = (100/750)*100 //13.333333
```