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

jadepam

于 2019-07-29 15:15:59 发布

阅读量807

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： postcssp 响应式布局 flex grid

本文链接：https://blog.youkuaiyun.com/pamki/article/details/97644336

本文介绍了前端响应式布局的最佳实践，通过postcss-plugin-px2units插件将px自动转换为vw、vh、rem单位，以适应不同比例的屏幕。在gulp环境下，详细演示了项目初始化、插件安装、gulpfile.js配置以及样式文件的输入输出，旨在解决UI设计稿在不同分辨率屏幕上的等比例缩放问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：

前端开发页面，需高度还原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', function () {
  var processors = [
    myplugin({
      viewportWidth: 3840, //原设计稿宽度3840
      viewportHeight: 2304,//原设计稿高度2