由來
這是一個重構(gòu)工具，試過有項目诸老，本來用著 px 寫單位隆夯，后來使用 rem 做適配，就要變更單位，有一些項目本來是按照 640 做設(shè)計稿寬度蹄衷，后來做小程序了忧额，做好的頁面要變成基于 750 寬度的設(shè)計稿，相對的寫好的絕對長度就要變宦芦。比如 640 里面的 320像素宙址，就要換成 750 標(biāo)準(zhǔn)里面的 375 像素了。
于是我就搞出來這個工具调卑，輸入已經(jīng)寫好的 css抡砂，配置好相應(yīng)的轉(zhuǎn)換步驟，即可輸出新長度標(biāo)準(zhǔn)的 css 了恬涧。
github 地址 下面附上 README
css 長度單位轉(zhuǎn)換器
對傳入字符串進(jìn)行正則替換注益，可以按順序執(zhí)行多個步驟，不 star 一個嗎溯捆？
(https://github.com/LiangWei88/Design-size-convertor)
單位轉(zhuǎn)換
- 一個單位按比例轉(zhuǎn)換為另一個單位丑搔，如 16px, 轉(zhuǎn)換為 rem 按照 1 像素等于 0.01 rem 的比值，保留 2 位小數(shù)提揍，得出 0.16rem
等比數(shù)字轉(zhuǎn)換
- 同一個單位相互轉(zhuǎn)換啤月，如 640px 設(shè)計稿中的 16px 轉(zhuǎn)換為 750px 設(shè)計稿中的數(shù)字，保留 0 位小數(shù)劳跃，得出 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
