[轉載]相容性--rem相容適配解決方案
阿新 • • 發佈：2018-12-23
REM 相容適配解決方案
什麼是 REM
REM（Font size of the root element）是指相對於根元素的字型大小的單位。
範例：
- 若根節點
font-size設定為10px，則使用3rem時，計算後得3*10 = 30px - 如果根節點設定為
20px，側計算後得3*20 = 60px
為什麼使用 REM
- 相對於
流佈局、響應式佈局等適配方式，REM 適配更為靈活，在不同螢幕尺寸上根據根節點來等比適配 - 使用便捷，從
px -> rem可以使用工作流自動完成
tmt-workflow 基準值約定
<html>根節點預設font-size=20px- 視覺稿預設寬度為
375px（即 iPhone 6 尺寸） - 其它螢幕寬度以 iPhone 6 的視覺為為基準，進行等比縮放
- rem 單位生效範圍為所有內聯、外聯樣式的 CSS 屬性值，
1px除外
tmt-workflow 是一個基於
Gulp(v4.0)、高效、跨平臺(macOS & Win)、可定製的前端工作流程。
現已推出 GUI 桌面工具：WeFlow，無需安裝任何環境依賴即可使用，官網下載：http://weflow.io/
tmt-workflow REM 方案使用思路
- 編碼過程中統一使用
px作為單位 - 工作流編譯後，
px->rem自動完成
開啟 REM
首先，編輯配置檔案 .tmtworkflowrc 如下：
{
"supportREM": true
}
流程詳述
開啟後，CSS 分為 外聯樣式 和 內聯樣式 兩部分邏輯執行：
Less -> CSS過程，由外掛 postcssPxtorem 對 LESS 中的px進行單位轉換HTML/EJS -> HTML過程，會使用外掛 posthtmlPx2rem 對 HTML 中的內聯樣式進行單位轉換
其它注意點
1. 相容 1px 問題
2. 雪碧圖相容問題
為避免雪碧圖遇到小數計算 bug，設定雪碧圖內各個元素之間的間隙為 4px，參見_tasks/TaskBuildDist.js
3. 強制不使用 REM 的預留 hack
如果希望某條 CSS樣式不進行單位轉換，可使用如下大小寫敏感的 px 寫法：
如：12PX 代理 12px，這樣工作流中就會忽略這條 CSS 屬性，不進行單位轉換