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