将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为单位(原文件并没有转换,内存中的对应文件转换,可以访问对应页面查看效果)

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

px-rem px转换为rem的工具的更多相关文章

  1. 让px单位自动转换为rem的方法

    开发工具:      编辑器:vscode;     css预处理器:less;(无具体要求): 步骤:   1. vscode安装cssrem插件:   2. 修改css插件的默认配置,其默认转换p ...

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

    将px转换为rem的工具,github地址:https://github.com/finance-sh/px-rem 怎样转换静态文件 安装: npm install px-rem -g 然后跑下命令 ...

  3. vue px转换为rem

    前端开发中还原设计图的重要性毋庸置疑,目前来说应用最多的应该也还是使用rem.然而很多人依然还是处于刀耕火种的时代,要么自己去计算rem值,要么依靠编辑器安装插件转换. 而本文的目标就是通过一系列的配 ...

  4. vue脚手架中使用Vant,实现自动按需引入组件,并将px转换为rem

    偶然间看到一款不错的移动端vue组件库Vant,照着官方文档敲了一下,感觉还是不错的.想着以后的项目中可能会运用到,特此记录下,方便之后使用. 现在很多的组件库为了减小代码包体积,都支持按需加载了.V ...

  5. 关于px、em和rem的学习笔记!

    刚参加前端工作,字体一般使用px来设置大小,在处理响应式界面时对字体的大小变化处理感觉很吃力,得知对字体的大小有三种大小格式设置方式,便想一探究竟,希望可以有所帮助! px px像素(Pixel),相 ...

  6. (转)px、em、rem的区别和使用

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem(国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位),那么三者有什么区别,又各自有什么优劣呢? 一.px特点 1. IE ...

  7. css中的px、em、rem 详解

    概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时 ...

  8. css中px,em和rem的区别

    css中px,em和rem的区别 今天,突然间发现一个特别有意思的问题,就是无意间看到一个网站中的em并不是16px,下面展开了对于px和em以及rem的探究. 首先,px是绝对长度单位,是相对于显示 ...

  9. 说说css中pt、px、em、rem都扮演了什么角色

    前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现, ...

随机推荐

  1. js中如何获取纯正的undefined?

    1.为什么要获取undefined? 因为undefined在javascript中不是保留字,可以被用户当做变量来赋值,这样如果我们后期需要用到undefined来检测一个变量的话,那么检测的值就不 ...

  2. 我的STL学习之路

    说起STL(标准模板库),相信了解C++的都不会陌生吧^_^.LZ是从大三开始学习C++(ps:不是科班出身),并慢慢接触使用STL的,在学校中使用STL比较多的情况是写数据结构代码,使用STL实现数 ...

  3. linux 关闭显示器命令

    首先要解释下DPMS的意思,dpms可以认为是一个显示能源管理系统,一般用于计算机功耗的管理.在linux中有几个选项:To control Energy Star (DPMS) features:  ...

  4. []cp,转载]提示MyEclipse Trial Expired,如何手动获取MyEclipse 注册码!很牛!

    1.建立JAVA Project,随便命名,只要符合规则就行. 2.在刚刚建好的Project右击src,新建一个类,命名为MyEclipseGen,把.java里本来有的代码全部删掉,再把下面的代码 ...

  5. Eclipse无法正常启动,弹出对话框内容为 A Java Runtime...

    1.Eclipse无法正常启动,弹出对话框内容为 A Java Runtime...如下图: 原因分析:由于软件版本的更新或者安装其他开发软件无意之间修改了配置文件中的路径,众所周知,Java虚拟机( ...

  6. 作业一 :关于C语言

    C语言是计算机专业的基础课,同时也是计算机专业的第一个入门语言,学好C语言母庸质疑.就目前来看,在C语言中已经学习的内容有:基本运算符及表达式.输入输出函数.选择 结构程序设计.循环结构程序设计.数组 ...

  7. Mysql 计划任务

    -- 设置 show variables like '%sche%'; ; -- Start存储过程 drop PROCEDURE if exists test; CREATE PROCEDURE t ...

  8. Django 跨域请求

    跨域:通过js或python在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(Django)的数据.只要协议.域名.端口有任何一个不同,都被 ...

  9. Java实现简单的RPC框架

    一.RPC简介 RPC,全称为Remote Procedure Call,即远程过程调用,它是一个计算机通信协议.它允许像调用本地服务一样调用远程服务.它可以有不同的实现方式.如RMI(远程方法调用) ...

  10. Python+VSCode+Git 学习总结

    稍等,先写个脑图... 继续,读完本文,你会学会: 1.如何在VSCode中写Python代码: 2.如何在VSCode中使用Git: 为什么写这篇总结 首先,我假设你是一名Python语言初学者,你 ...