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

前言：

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

实战案例：原UI设计稿为3840px2304px,需在1920px1080px屏幕上等比例缩放

gulp下简单演示

源码地址：https://gitee.com/jadepam/pos…

新建项目生成package.json

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: 38.40, //原设计稿宽度3840/100
      viewportHeight: 23.04,//原设计稿高度2304/100
      rootValue: 200,//原设计稿高度3840/1920，此处为pc端页面，如为移动端改为750
    })
  ];
  return gulp.src('./src/*.css')
    .pipe(postcss(processors))
    .pipe(gulp.dest('./dest'));
});

样式文件输入输出

//输入

html { font-size: 100px;}
@media screen and (max-width: 3840px) {
    html { font-size: 200px;}
  }
@media screen and (max-width: 1920px) {
    html { font-size: 100px;}
}
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: flex;
    justify-content: space-between;
    flex-direction: row;
}
.left,.right,.center{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.bottom {
    margin:80rx;
    flex: 1;
}

.left{
   width: 930wx;  
   font-size: 36rx;
}
.right{
    width: 930wx;
    font-size: 36rx;
}
.center{
    width: 1768wx;
    font-size: 64rx; 
}
.left div{
    height: 640hx;
 }

.center div:first-child{
    flex: 1;
}
.center div:last-child{
    height:300hx;
}

.right div{
    height: 984hx;  
}

//输出

html { font-size: 100px;}
@media screen and (max-width: 3840px) {
    html { font-size: 200px;}
  }
@media screen and (max-width: 1920px) {
    html { font-size: 100px;}
}
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.42rem;
}
.bottom{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}
.left,.right,.center{
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}
.bottom {
    margin:0.4rem;
    flex: 1;
}

.left{
   width: 24.21875vw;  
   font-size: 0.18rem;
}
.right{
    width: 24.21875vw;
    font-size: 0.18rem;
}
.center{
    width: 46.04167vw;
    font-size: 0.32rem; 
}
.left div{
    height: 27.77778vh;
 }

.center div:first-child{
    flex: 1;
}
.center div:last-child{
    height:13.02083vh;
}

.right div{
    height: 42.70833vh;  
}

最终效果：