A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 社会佩奇 中级黑马   /  2018-12-20 16:28  /  546 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

本帖最后由 社会佩奇 于 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


点击有惊喜

0 个回复

您需要登录后才可以回帖 登录 | 加入黑马