cssrem转换工具_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为单位(原文件并没有转换，内存中的对应文件转换，可以访问对应页面查看效果)
当你编译到生产环境时，对应的文件已经被转换
px-rem px转换为rem的工具
将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 将px转换为rem的工具 怎样转换静态文件 安装: npm install px- ...
vue脚手架中使用Vant，实现自动按需引入组件，并将px转换为rem
偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...
CSS3中的Rem值与Px之间的换算
bootstrap默认 html{font-size: 10px;} rem是一个相对大小的值,它相对于根元素, 比如假设,我们设置html的字体大小的值为html{font- ...
CSS3 中的 rem 值与 px 之间的换算
想给博客换个主题,到处找找不到满意的,最后发现默认主题 twentytwelve 越看越顺眼,于是就想动手改一下用. 看 CSS 文件的时候发现引入了一个新大小单位:rem,虽然 CSS 文件注释里有 ...
移动端页面使用单位的问题：关于px、百分比、em、rem开发中逐渐转换的问题记录
开始写前端页面也有了快两年时间,从一开始的懵逼到现在的淡定,但是不能改变我还是一只小菜鸟的事实,平时遇到的一些问题都会记录在文件夹里,现在都整理一下大家一起分享自己平时也翻翻看看~ 不知道大家平时写的 ...
rem,em,与px的比较用法
在Web中使用什么单位来定义页面的字体大小,至今天为止都还在激烈的争论着,有人说PX做为单位好,有人说EM优点多,还有人在说百分比方便,以至于出现了CSS Font-Size: em vs. px v ...
rem适配布局(rem+less+媒体查询 和 rem+flexible.js)
1. rem 基础 rem 是一个相对单位,类似于 em ,em 是父元素字体大小. em 是相对于父元素 的字体大小来说的 rem 是相对于 html 元素 字体大小来说的 rem 优点 就是可以 ...
前端页面适配的rem换算 为什么要使用rem
之前有些适配做法,是通过js动态计算viewport的缩放值(initial-scale). 例如以屏幕320像素为基准,设置1,那屏幕375像素就是375/320=1.18以此类推. 但直接这样强制 ...
Web移动前端开发-——rem+less+媒体查询，rem+flexble.js+媒体查询
实际开发搞搞起来!!!! rem适配方案 媒体查询+rem+less 基础知识铺垫 第一步,我们需要拿到设计稿,安装设计稿的要求来设置一个合适的html字体大小. 第二步,计算元素大小的取值 页面re ...
随机推荐
Android系统中默认值的意义列表
转自:http://blog.csdn.net/yabg_zhi_xiang/article/details/51727844 在SettingsProvider中设置系统中默认值,我们可以在fram ...
thinkphp 的save()不能更新数据解决办法
用save()方法始终更新不了数据,又不显示明确的错误信息,找了好久才在手册里看到一句至关重要的话: 为了保证数据库的安全,避免出错更新整个数据表,如果没有任何更新条件,数据对象本身也不包含主键字段的 ...
HTML5和css3的总结四
HTML5的新东西总结四: 1>video和audio 声明方法(可以制作背景音乐) var oV/oA=new Video()/Audio(); oV/oA.src=''; oV/oA.pla ...
jquery扩展 $.fn
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个 ...
关于表单提交submit的兼容性问题。
这里的form 表单 点击下载执行的函数名字是submit,这样不规范,submit是提交表单,函数名字不能取名叫submit,如果取名叫submit会在低版本的浏览器上无法识别,导致直接提交表单,无 ...
document.wrtie()用法
推荐看这篇文章,非常的好 http://www.softwhy.com/article-8326-1.html
[JDBC]你真的会正确关闭connection吗?
Connection conn = null; PreparedStatement stmt = null; ResultSet rs = null; try { conn = DriverManag ...
C#的一些方法读程序转c++
1.Array.Copypublic static void Copy( Array sourceArray, int sourceIndex, Array destinationArray, int ...
python的进度条实现
进度条最主要的问题就是所有字符全部在同一行,而且可以修改.然而当执行print语句的时候,python会在打印完这个语句的同时,在结尾加上换行‘\n’,这就导致在控制台下一旦被print之后就无法修改 ...
Unity3D实现3D立体游戏原理及过程，需偏振眼镜3D显
http://tieba.baidu.com/p/3038509618?fr=ala0&pstaala=3