神刀安全网

一个使用最简单的px转rem预处理工具

一个使用最简单的px转rem预处理工具 一个使用最简单的px转rem预处理工具

如果你使用 Stylus 作为你的预处理CSS的工具,那么 px2rem 是你使用最简单处理 pxrem 工具,使用方法如此简单:

首先安装工具。 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 'node_modules/stylus-px2rem/lib/mixins' @import 'node_modules/stylus-px2rem/lib/font-size' @import 'node_modules/stylus-px2rem/lib/border' @import 'node_modules/stylus-px2rem/lib/margin' @import 'node_modules/stylus-px2rem/lib/padding' @import 'node_modules/stylus-px2rem/lib/width' @import 'node_modules/stylus-px2rem/lib/height' @import 'node_modules/stylus-px2rem/lib/line-height'  html-font-size = 10px;  div {     margin 24px 24px     font-size 14px     padding-bottom 12px     width 100px     height 100% }

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 一个使用最简单的px转rem预处理工具

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址