px-rem 一个将px转换为rem的工具

将px转换为rem的工具,github地址：https://github.com/finance-sh/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为单位（原文件并没有转换，内存中的对应文件转换，可以访问对应页面查看效果）

当你编译到生产环境时，对应的文件已经被转换

秒客网