最簡單的px轉rem預處理方法

若是你使用 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 編譯成 index.css 並預處理將px轉換成 rem 上面內容輸出爲：

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複製代碼