一個使用最簡單的px轉rem預處理工具

mhxz1036 8年前發布 | 19K 次閱讀 HTML CSS 前端技術

如果你使用 Stylus 作為你的預處理CSS的工具，那么 px2rem 是你使用最簡單處理 px 轉 rem 工具，使用方法如此簡單：

首先安裝工具。 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%
}</code></pre>
 本文由用戶 mhxz1036 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！