將px轉換為rem的工具,github地址：https://github.com/finance-sh/px-rem
將px轉換為rem的工具
怎樣轉換靜態文件
安裝：
npm install px-rem -g
然后跑下命令
px2rem
你也可以設置一個配置文件
px2rem --config pxrem.config.js
config
默認 config:
{
patterns: "**/*.css", pxToRemRatio: 0.01, ignoreCss: [], isReplace: false, convertBorder1px: false }
你也可以在當前文件夾下新建一個配置文件, 比如: pxrem.config.js
module.exports = { patterns: "./WrcIosselect/lib/WrcIosselect.css", pxToRemRatio: 0.01, ignoreCss: ['font-size', 'line-height'], isReplace: false, convertBorder1px: true };
然后你可以在命令行輸入時作為參數帶入：
px2rem --config pxrem.config.js
參數說明
patterns: 訪問 https://www.npmjs.com/package/glob 然后查看patterns參數
pxToRemRatio: px和rem的比值，默認0.01
ignoreCss: 該數組內的css屬性將不會被轉換
isReplace: 是否替換原來的文件，如果為true則替換，否則會在當前文件夾下生成一個原文件名 + '-px2rem' 的文件
convertBorder1px: 是否轉換1px寬度的border,默認不轉換
pxToRemRatio 說明
如果你是使用adaptive.js,https://github.com/finance-sh/adaptive 或者使用1px設計圖對應0.01rem的方法：
1，如果是基於設計圖開發，這個值就是0.01
2，如果是將width=device-width下，以px為單位的老css文件轉換為rem, 如果新的設計圖為640，這個值一般為 (1 * 2) / 100, 如果新的設計圖為750，這個值為 (7 / 3 * 1) / 100
如果你使用的是手淘解決方案Flexible或類似原理的自適應方案
1，如果是基於設計圖，這個值是 1 / (設計圖寬度 / 10)
2，如果是將width=device-width下，以px為單位的老css文件轉換為rem, 如果新的設計圖為640，這個值一般為 1 / (640 / 10) * 2, 如果新的設計圖為750，這個值為 1 / (750 / 10) * 2.3333
怎么在webpack中使用
package.json:
"devDependencies": { "px-rem": "*" }
配置webpack.config.js:
module.exports = { node: { fs: "empty" }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader!px-rem' } ] } }
你必須新建一個文件叫：pxrem.webpack.conf.json 在你的項目根目錄 (和package.json同一文件夾下):
{
"pxToRemRatio": 0.01, "ignoreCss": [], "convertBorder1px": true }
當你在webpack項目的開發環境使用時，它會自動將對應文件中的px轉換為rem為單位（原文件並沒有轉換，內存中的對應文件轉換，可以訪問對應頁面查看效果）
當你編譯到生產環境時，對應的文件已經被轉換