一个使用最简单的px转rem预处理工具
mhxz1036
9年前
<p>如果你使用 <a href="/misc/goto?guid=4959640663020680470" rel="nofollow,noindex">Stylus</a> 作为你的预处理CSS的工具,那么 px2rem 是你使用最简单处理 px 转 rem 工具,使用方法如此简单:</p> <p>首先安装工具。 <a href="/misc/goto?guid=4959670407571519627" rel="nofollow,noindex">stylus-px2rem</a></p> <pre> <code class="language-css">npm install stylus-px2rem --save-dev</code></pre> <p>然后只要在你的 index.styl 文件引用就可以里</p> <pre> <code class="language-css">@import "node_modules/stylus-px2rem" div{ margin 24px 24px font-size 14px padding-bottom 12px width 100px height 100% }</code></pre> <p><a href="/misc/goto?guid=4959640663020680470" rel="nofollow,noindex">Stylus</a> 工具将 index.styl 编译成 index.css 并预处理将 px 转换成 rem 上面内容输出为:</p> <pre> <code class="language-css">div{ margin:1.5rem 1.5rem; font-size:.875rem; padding-bottom:.75rem; width:6.25rem; height:6.25rem }</code></pre> <p>默认 html-font-size =10px 你可以设置它。你可以设置部分样式转化,部分样式不转换成 rem ,你只需这么引用 styl 即可。这种方法 mixins 必须引用它</p> <pre> <code class="language-css">@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% }</code></pre>