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 一個嗎？

github page

TODO

1. 作成 webpack loader