RainyX 2019-09-06
前端开发页面,需高度还原UI设计稿,布局过程中涉及width、heigth、字体大小等,在适配不同比例屏幕大小时,往往会才用vw、vh、rem等来自动适配,本插件主要用于解决:自动计算设计稿px到vw、vh、rem单位的转换。
实战案例:使用Flex布局、grid布局、视口单元rem、vw和wh来适应多屏问题,原UI设计稿为3840px2304px,需在1920px1080px屏幕上等比例缩放
源码地址:https://gitee.com/jadepam/pos...
npm init
npm i --save gulp gulp-postcss postcss-plugin-px2units
本次案例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); }
最终效果:
media="screen and (min-width:641px) and (max-width: 959px)". <%@ page language="java" contentType="t