最简单的px转rem预处理方法
工具将index.styl 编译成 index.css 并预处理将px转换成 rem 上面内容输出为：
选择使用和设置初始值
在Gulp中使用
在npm script 中使用
如果你使用 作为你的预处理CSS的工具，那么 px2rem 是你使用最简单处理 px 转 rem工具， 使用方法如此简单：
首先安装工具Stylus
stylus-px2rem
[Bash shell]
纯文本查看
复制代码
1 | npm install stylus-px2rem --save-dev[color=rgba(140, 140, 140, 0.8)] |
然后只要在你的index.styl 文件引用就可以里
[CSS]
纯文本查看
复制代码
1 | @import "node_modules/stylus-px2rem"div{ margin 24px 24px font-size 14px padding-bottom 12px width 100px height 100%}[color=rgba(140, 140, 140, 0.8)] |
Stylus
[CSS]
纯文本查看
复制代码
1 | div{ margin:1.5rem 1.5rem; font-size:.875rem; padding-bottom:.75rem; width:6.25rem; height:6.25rem}[color=rgba(140, 140, 140, 0.8)] |
选择使用和设置初始值
默认html-font-size＝10px 你可以设置它。你可以设置部分样式转化，部分样式不转换成rem，你只需这么引用 styl 即可。这种方法 mixins 必须引用它
[CSS]
纯文本查看
复制代码
1 | @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%}[color=rgba(140, 140, 140, 0.8)] |
在Gulp中使用
在gulpfile.js中建立任务
[JavaScript]
纯文本查看
复制代码
1 | 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'));})[color=rgba(140, 140, 140, 0.8)] |
在你的styl文件中引入
[CSS]
纯文本查看
复制代码
1 | @import 'stylus-px2rem'.banner{ height 140px font-size 24px}[color=rgba(140, 140, 140, 0.8)] |
在npm script 中使用
配置你的package.json文件
[JavaScript]
纯文本查看
复制代码
1 | { "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" }}[color=rgba(140, 140, 140, 0.8)] |
运行命令
[JavaScript]
纯文本查看
复制代码
1 | $ npm run build:css[/align]$ npm run watch:css |
更多技术资讯可关注：gzitcast
