一个使用最简单的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>