本帖最后由 社会佩奇 于 2018-12-20 16:32 编辑
最简单的px转rem预处理方法如果你使用 Stylus 作为你的预处理CSS的工具,那么 px2rem 是你使用最简单处理 px 转 rem工具,stylus-px2rem 使用方法如此简单: 首先安装工具[Bash shell] 纯文本查看 复制代码 npm install stylus-px2rem --save-dev[color=rgba(140, 140, 140, 0.8)]
然后只要在你的index.styl 文件引用就可以里 [CSS] 纯文本查看 复制代码 @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 工具将index.styl 编译成 index.css 并预处理将px转换成 rem 上面内容输出为: [CSS] 纯文本查看 复制代码 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] 纯文本查看 复制代码 @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] 纯文本查看 复制代码 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] 纯文本查看 复制代码 @import 'stylus-px2rem'.banner{ height 140px font-size 24px}[color=rgba(140, 140, 140, 0.8)]
在npm script 中使用配置你的package.json文件 [JavaScript] 纯文本查看 复制代码 { "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] 纯文本查看 复制代码 $ npm run build:css[/align]$ npm run watch:css
点击有惊喜
|