px-rem 一个将px转换为rem的工具
2016-12-22 14:51
148 查看
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem
npm install px-rem -g
然后跑下命令
px2rem
你也可以设置一个配置文件
px2rem --config pxrem.config.js
你也可以在当前文件夹下新建一个配置文件, 比如: pxrem.config.js
然后你可以在命令行输入时作为参数带入:
convertBorder1px: 是否转换1px宽度的border,默认不转换
2,如果是将width=device-width下,以px为单位的老css文件转换为rem, 如果新的设计图为640,这个值一般为 (1 * 2) / 100, 如果新的设计图为750,这个值为 (7 / 3 * 1) / 100
你必须新建一个文件叫:pxrem.webpack.conf.json 在你的项目根目录 (和package.json同一文件夹下):
当你在webpack项目的开发环境使用时,它会自动将对应文件中的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.01ignoreCss: 该数组内的css属性将不会被转换 isReplace: 是否替换原来的文件,如果为true则替换,否则会在当前文件夹下生成一个原文件名 + '-px2rem' 的文件
convertBorder1px: 是否转换1px宽度的border,默认不转换
pxToRemRatio 说明
如果你是使用adaptive.js,https://github.com/finance-sh/adaptive 或者使用1px设计图对应0.01rem的方法:
1,如果是基于设计图开发,这个值就是0.012,如果是将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为单位(原文件并没有转换,内存中的对应文件转换,可以访问对应页面查看效果)
当你编译到生产环境时,对应的文件已经被转换
相关文章推荐
- px,em,rem单位转换工具
- rem以及px转换为rem工具
- 单位转换---dp转化为px---可以将其封装为一个工具类
- px-rem px转换为rem的工具
- 一个UnversalTime与本地时间相互转换的工具
- 一个比较好用的.NET转换工具
- 一个代码转换的工具
- 发布一个vss转换到svn的工具
- 在blueidea看到一个帖子后作的一个小转换工具。
- rem与px的转换
- 一个UnversalTime与本地时间相互转换的工具
- 将OpenOffice.org变成一个文档格式转换工具
- 一个挺好用的在线时区转换工具
- 一个自己编写的xml和JAVA对象之间的转换工具,xml和对象轻松转换(simple-xml2object)
- 啊,好久没更新了,今天分享一个小工具,两个方法,转换字节数组成十六进制字符串
- 推荐一个HTML5视频转换工具
- 自己封装的一个Java版图片工具,具备压缩,伸缩变换,透明处理,格式转换等功能.
- 保存一个免费的在线的图片转换工具网站,支持BMP,JPG,IOC,PNG和GIF
- 【原创工具】将一个整形数字转换成三位逗号分隔的形式
- native2ascii -Java 的一个文件转码工具(properties文件汉字转换)