# postcss-plugin-px2units-cli

**Repository Path**: jadepam/postcss-plugin-px2units-cli

## Basic Information

- **Project Name**: postcss-plugin-px2units-cli
- **Description**: postcss-plugin-px2units-cli
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-07-25
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 前端响应式布局的最佳实践postcss-plugin-px2units

### 前言：
前端开发页面，需高度还原UI设计稿，布局过程中涉及width、heigth、字体大小等，在适配不同比例屏幕大小时，往往会才用vw、vh、rem等来自动适配，本插件主要用于解决：自动计算设计稿px到vw、vh、rem单位的转换。

实战案例：使用Flex布局、网格布局、视口单元rem、vw和wh来适应多屏问题，原UI设计稿为3840px*2304px,需在1920px*1080px屏幕上等比例缩放


# gulp下简单演示

### 新建项目生成package.json
源码地址：https://gitee.com/jadepam/postcss-plugin-px2units-cli
```
npm init
```
### 安装插件

```
npm i --save gulp gulp-postcss postcss-plugin-px2units
```

###  新建gulpfile.js 

本次案例vw、vh用于整体布局，rem用于设置字体
```
var gulp = require('gulp');
var postcss = require('gulp-postcss');
var myplugin = require('postcss-plugin-px2units');
gulp.task('css', function () {
  var processors = [
    myplugin({
      viewportWidth: 3840, //原设计稿宽度3840
      viewportHeight: 2304,//原设计稿高度2304
    })
  ];
  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});
```

### 样式文件输入输出
//输入
```
html { font-size: 100wx;}
/* 100/1920 */
body{
    padding: 0;
    margin: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: space-around;
    background: yellow;
    text-align: center;
}
div{
    border: 1px solid black;  
}
.top{
    height: 217hx;
    font-size: 84rx;/*/设计稿字体大小*/
}
.bottom{
    display: grid;
    grid-template-columns: 930fr 1768fr 930fr; /* //设计稿宽度 */
    font-size: 84wx;/*/设计稿字体大小*/
}
.left div,.right div,.center div{
    margin: 40wx;
}
.bottom {
    margin:80wx;
    flex: 1;
}
.left{
    display: grid;
    grid-template-rows: repeat(3, 640fr);
}

.center{
    display: grid;
    grid-template-rows: 1fr auto;
}

.right{
    display: grid;
    grid-template-rows: repeat(2, 984fr);
}

```
//输出
```
html { font-size: 2.60417vw;}
/* 100/1920 */
body{
    padding: 0;
    margin: 0;
    display: flex;
    height: 100vh;
    flex-direction: column;
    justify-content: space-around;
    background: yellow;
    text-align: center;
}
div{
    border: 1px solid black;  
}
.top{
    height: 9.4184vh;
    font-size: 0.84rem;/*/设计稿字体大小*/
}
.bottom{
    display: grid;
    grid-template-columns: 930fr 1768fr 930fr; /* //设计稿宽度 */
    font-size: 2.1875vw;/*/设计稿字体大小*/
}
.left div,.right div,.center div{
    margin: 1.04167vw;
}
.bottom {
    margin:2.08333vw;
    flex: 1;
}
.left{
    display: grid;
    grid-template-rows: repeat(3, 640fr);
}

.center{
    display: grid;
    grid-template-rows: 1fr auto;
}

.right{
    display: grid;
    grid-template-rows: repeat(2, 984fr);
}

```
最终效果：

<img src="./img/2@.jpg">
<img src="./img/1@.jpg">