css 长度单位转换器

由来

这是一个重构工具,试过有项目,原本用着 px 写单位,后来使用 rem 作适配,就要变动单位,有一些项目原本是按照 640 作设计稿宽度,后来作小程序了,作好的页面要变成基于 750 宽度的设计稿,相对的写好的绝对长度就要变。好比 640 里面的 320像素,就要换成 750 标准里面的 375 像素了。
因而我就搞出来这个工具,输入已经写好的 css,配置好相应的转换步骤,便可输出新长度标准的 css 了。
github 地址 下面附上 READMEcss

css 长度单位转换器

对传入字符串进行正则替换,能够按顺序执行多个步骤,不 star 一个吗?
(https://github.com/LiangWei88...node

单位转换

  • 一个单位按比例转换为另外一个单位,如 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 里面webpack

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

而后使用 npm run dscgit

下载压缩包

到 github 上面直接下载
而后运行 node index.jsgithub

直接使用,不 star 一个吗?

github pageweb

TODO

  1. 作成 webpack loader
相关文章
相关标签/搜索