由來(lái)
這是一個(gè)重構(gòu)工具，試過(guò)有項(xiàng)目，本來(lái)用著 px 寫(xiě)單位，后來(lái)使用 rem 做適配，就要變更單位，有一些項(xiàng)目本來(lái)是按照 640 做設(shè)計(jì)稿寬度，后來(lái)做小程序了，做好的頁(yè)面要變成基于 750 寬度的設(shè)計(jì)稿，相對(duì)的寫(xiě)好的絕對(duì)長(zhǎng)度就要變。比如 640 里面的 320像素，就要換成 750 標(biāo)準(zhǔn)里面的 375 像素了。
于是我就搞出來(lái)這個(gè)工具，輸入已經(jīng)寫(xiě)好的 css，配置好相應(yīng)的轉(zhuǎn)換步驟，即可輸出新長(zhǎng)度標(biāo)準(zhǔn)的 css 了。
github 地址 下面附上 README
css 長(zhǎng)度單位轉(zhuǎn)換器
對(duì)傳入字符串進(jìn)行正則替換，可以按順序執(zhí)行多個(gè)步驟，不 star 一個(gè)嗎？
(https://github.com/LiangWei88/Design-size-convertor)
單位轉(zhuǎn)換
- 一個(gè)單位按比例轉(zhuǎn)換為另一個(gè)單位，如 16px, 轉(zhuǎn)換為 rem 按照 1 像素等于 0.01 rem 的比值，保留 2 位小數(shù)，得出 0.16rem
等比數(shù)字轉(zhuǎn)換
- 同一個(gè)單位相互轉(zhuǎn)換，如 640px 設(shè)計(jì)稿中的 16px 轉(zhuǎn)換為 750px 設(shè)計(jì)稿中的數(shù)字，保留 0 位小數(shù)，得出 19px
注意
- 滿(mǎn)足下列幾種格式，16px; 或 16px 16px 或 16px}
- 即單位后必須帶空格或分號(hào)或花括號(hào)
/*錯(cuò)誤寫(xiě)法*/
.test {
width:16px
}
/*正確寫(xiě)法, 三種都可以*/
.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 上面直接下載
然后運(yùn)行 node index.js
直接使用，不 star 一個(gè)嗎？
TODO
- 做成 webpack loader
