REM 兼容適配解決方案
2018-11-15 16:55 更新
REM 兼容適配解決方案
什么是 REM
REM（Font size of the root element）是指相對(duì)于根元素的字體大小的單位。
范例：
- 若根節(jié)點(diǎn)
font-size設(shè)置為10px，則使用3rem時(shí)，計(jì)算后得3*10 = 30px - 如果根節(jié)點(diǎn)設(shè)置為
20px，側(cè)計(jì)算后得3*20 = 60px
為什么使用 REM
- 相對(duì)于
流布局、響應(yīng)式布局等適配方式，REM 適配更為靈活，在不同屏幕尺寸上根據(jù)根節(jié)點(diǎn)來(lái)等比適配 - 兼容性好（Android 2.1+ / iOS 4.1+）
- 使用便捷，從
px -> rem可以使用工作流自動(dòng)完成
tmt-workflow 基準(zhǔn)值約定
<html>根節(jié)點(diǎn)默認(rèn)font-size=20px- 視覺(jué)稿默認(rèn)寬度為
375px（即 iPhone 6 尺寸） - 其它屏幕寬度以 iPhone 6 的視覺(jué)為為基準(zhǔn)，進(jìn)行等比縮放
- rem 單位生效范圍為所有內(nèi)聯(lián)、外聯(lián)樣式的 CSS 屬性值，
1px除外
tmt-workflow REM 方案使用思路
- 編碼過(guò)程中統(tǒng)一使用
px作為單位 - 工作流編譯后，
px->rem自動(dòng)完成 - 調(diào)用 lib-rem.less 進(jìn)行個(gè)屏幕比例適配設(shè)置
開(kāi)啟 REM
首先，編輯配置文件 .tmtworkflowrc 如下：
{
"supportREM": true
}再次，在項(xiàng)目 LESS 出口文件中引入 lib-rem.less
流程詳述
開(kāi)啟后，CSS 分為 外聯(lián)樣式 和 內(nèi)聯(lián)樣式 兩部分邏輯執(zhí)行：
Less -> CSS過(guò)程，由插件 postcssPxtorem 對(duì) LESS 中的px進(jìn)行單位轉(zhuǎn)換HTML/EJS -> HTML過(guò)程，會(huì)使用插件 posthtmlPx2rem 對(duì) HTML 中的內(nèi)聯(lián)樣式進(jìn)行單位轉(zhuǎn)換
其它注意點(diǎn)
1. 兼容 1px 問(wèn)題
考慮到 1px 轉(zhuǎn)換為 rem 會(huì)有小數(shù)bug，工作流中會(huì)忽略 1px 的轉(zhuǎn)換，最小轉(zhuǎn)換數(shù)值為 2px。
參見(jiàn)：postcss-pxtorem option:minPixelValue
參見(jiàn)：posthtmlPx2rem option:minPixelValue
2. 雪碧圖兼容問(wèn)題
為避免雪碧圖遇到小數(shù)計(jì)算 bug，設(shè)置雪碧圖內(nèi)各個(gè)元素之間的間隙為 4px，參見(jiàn)_tasks/TaskBuildDist.js
3. 強(qiáng)制不使用 REM 的預(yù)留 hack
如果希望某條 CSS樣式不進(jìn)行單位轉(zhuǎn)換，可使用如下大小寫(xiě)敏感的 px 寫(xiě)法：
如：12PX 代理 12px，這樣工作流中就會(huì)忽略這條 CSS 屬性，不進(jìn)行單位轉(zhuǎn)換
以上內(nèi)容是否對(duì)您有幫助：
更多建議：