css中的单位换算_css 长度单位转换器

由来

这是一个重构工具，试过有项目，本来用着 px 写单位，后来使用 rem 做适配，就要变更单位，有一些项目本来是按照 640 做设计稿宽度，后来做小程序了，做好的页面要变成基于 750 宽度的设计稿，相对的写好的绝对长度就要变。比如 640 里面的 320像素，就要换成 750 标准里面的 375 像素了。

于是我就搞出来这个工具，输入已经写好的 css，配置好相应的转换步骤，即可输出新长度标准的 css 了。

github 地址 下面附上 README

css 长度单位转换器

对传入字符串进行正则替换，可以按顺序执行多个步骤，不 star 一个吗？

(https://github.com/LiangWei88...

单位转换

一个单位按比例转换为另一个单位，如 16px, 转换为 rem 按照 1 像素等于 0.01 rem 的比值，保留 2 位小数，得出 0.16rem

等比数字转换

同一个单位相互转换，如 640px 设计稿中的 16px 转换为 750px 设计稿中的数字，保留 0 位小数，得出 19px

注意

满足下列几种格式，16px; 或 16px 16px 或 16px}

即单位后必须带空格或分号或花括号

/*错误写法*/

.test {

width:16px

}

/*正确写法, 三种都可以*/

.test {

width:16px;

margin: 16px 22px;

font-size: 32px}

使用方法

直接使用

npm i --save design-size-convertor

node node_modules/design-size-convertor/index.js

快捷脚本

npm i --save design-size-convertor 安装完，

可以把 node node_modules/design-size-convertor/index.js 放入到你的 package.json 的 script 里面

"script" : {

"dsc": "node node_modules/design-size-convertor/index.js"

}

然后使用 npm run dsc

下载压缩包

到 github 上面直接下载

然后运行 node index.js

直接使用，不 star 一个吗？

TODO

做成 webpack loader