px2rem 轉換插件發佈 1.0.2 版本

時間 2019-12-12

標籤 px2rem rem 轉換插件發佈 1.0.2 版本欄目 CSS 简体版

原文原文鏈接

複製了 CallMeXYZ 的插件，修復了包含 media query 的 bug
(media query 是不能改變的，如：@media (max-width:640px))javascript

px2rem

開發響應式網頁，尤爲是手機端，經常採起rem單位。這個webpack的小loader主要是省去了每次輸入長、寬、字體等都要把像素px換算成rem的麻煩，
開發時直接輸入px,最後打包打包時換算爲rem。css

價格

1個 github star 哈哈哈哈java

內容列表

介紹

這是你原先的css或者js代碼react

// css
div {
    font-size: 14px;
    width: 100px;
}

// js 例如 react
<Page style={{ fontSize: '14px', width: '100px' }} />

採起默認的 1rem=10px 轉化後變成webpack

// css
div {
    font-size: 1.400rem;
    width: 10rem;
}

// js such as in react
<Page style={{ fontSize: '1.400rem', width: '10rem' }} />

安裝

npm install webpack-px2rem-loader --save-dev

使用

//in your webpack.config.js

module.exports={
   ...
    module:{
        // 或者 loaders
        rules:[
            {
                test:/\.jsx$/,
                loader:'webpack-px2rem-loader',
                // 這個配置是可選的
                 query:{
                    // 1rem=npx 默認爲 10
                    basePx:10,
                    // 只會轉換大於min的px 默認爲0
                    // 由於很小的px（好比border的1px）轉換爲rem後在很小的設備上結果會小於1px，有的設備就會不顯示
                    min:1,
                    // 轉換後的rem值保留的小數點後位數 默認爲3
                    floatWidth:3
                }

            }
        ]
    }
  }