前端响应式布局的最佳实践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/pos...

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);
}

最终效果：