如果你使用 Stylus 作為你的預處理CSS的工具，那麼 px2rem 是你使用最簡單處理 px 轉 rem 工具，stylus-px2rem 使用方法如此簡單：

首先安裝工具

npm install stylus-px2rem --save-dev

然後只要在你的index.styl 檔案引用就可以裡

@import "node_modules/stylus-px2rem"
div{ 
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%
}

Stylus 工具將index.styl

div{
    margin:1.5rem 1.5rem;
    font-size:.875rem;
    padding-bottom:.75rem;
    width:6.25rem;
    height:6.25rem
}

選擇使用和設定初始值

預設html-font-size＝10px 你可以設定它。你可以設定部分樣式轉化，部分樣式不轉換成rem，你只需這麼引用 styl 即可。這種方法 mixins 必須引用它

@import 'stylus-px2rem/mixins'
@import 'stylus-px2rem/font-size'
 

@import 'stylus-px2rem/border'
@import 'stylus-px2rem/margin'
@import 'stylus-px2rem/padding'
@import 'stylus-px2rem/width'
@import 'stylus-px2rem/height'
@import 'stylus-px2rem/line-height'

html-font-size = 10px;

div {
    margin 24px 24px
    font-size 14px
    padding-bottom 12px
    width 100px
    height 100%
}
 

在Gulp中使用

在gulpfile.js中建立任務

var gulp = require('gulp');
var stylus = require('gulp-stylus');
var px2rem = require('stylus-px2rem');
gulp.task('stylus',function(){
    gulp.src('./public/styl/*.styl')
        .pipe(stylus({
            use:[px2rem()],
            compress:true
        }))
        .pipe(gulp.dest('./public/css'));

})

在你的styl檔案中引入

@import 'stylus-px2rem'
.banner{
    height 140px
    font-size 24px
}

在npm script 中使用

配置你的package.json檔案

{
  "scripts": {
    "build:css": "stylus -u autoprefixer-stylus -u stylus-px2rem css/index.styl -o css/ -c",
    "watch:css": "stylus -u autoprefixer-stylus -u stylus-px2rem -w \"css/index.styl\" -o css/ -c "
  },
  "dependencies": {
    "autoprefixer-stylus": "^0.9.2",
    "stylus": "^0.54.2",
    "stylus-px2rem": "^1.0.4"
  }
}

執行命令

$ npm run build:css
$ npm run watch:css