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

前言：

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

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

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', funct