REM 相容適配解決方案


REM 相容適應解決方案

什麼是REM

REM（Font size of the root element）是指相對於根元素的字體大小的單位。

範例：

  • 若根節點font-size設定為 10px，則使用 3rem 時，計算後得 3*10 = 30px
  • 若根節點設定為 20px，則側計算後得 3*20 = 60px

為什麼要使用REM

  • 相對於串流佈局、響應式佈局等適應方式， REM 適配更為靈活，在不同螢幕尺寸上根據根節點來等比適合
  • 相容性好（Android 2.1+ / iOS 4.1+）
  • #使用便捷，從 px -> rem 可以使用工作流程自動完成

tmt-workflow 基準值約定

  1. <html> 根節點預設 font-size = 20px
    2. ## 視覺稿預設寬度為 
  2. #375px（即iPhone 6 尺寸）
    3. 其它螢幕寬度以iPhone 6 的視覺為基準，進行等比縮放
  3. rem 單位生效範圍為所有內聯、外聯樣式的CSS屬性值，
  4. 1px 除外

    編碼過程中統一使用 
  1. px 作為單位
    2. 工作流程編譯後，
  2. px -> rem 自動完成
    3. 呼叫 lib-rem.less 進行一個螢幕比例適配設定

首先，編輯設定檔 

.tmtworkflowrc 如下：

#
{  "supportREM": true}

再一次，在專案LESS 出口文件中引入 lib-rem.less

#流程詳述

開啟後，CSS 分為 外部樣式 和 內嵌樣式 兩部分邏輯執行：

  1. Less -> CSS 過程，由外掛程式 postcssPxtorem 對LESS 中的 # px 進行單位轉換
  2. HTML/EJS -> HTML 過程，會使用外掛程式 posthtmlPx2rem 對HTML 中的內聯樣式進行單位轉換

其它注意點

#1. 相容1px 問題

考慮到1px 轉換為  rem 會有小數bug，工作流程會忽略 1px 的轉換，最小轉換數值為 2px。
參見：postcss-pxtorem option:minPixelValue
參見：posthtmlPx2rem option:minPixelValue

2. 雪碧圖相容問題

#為避免雪碧圖遇到小數計算bug，設定雪碧圖內各個元素之間的間隙為 4px，參見_tasks/TaskBuildDist.js

3. 強制不使用REM 的預留hack

如果希望某條 CSS樣式不進行單位轉換，可使用如下大小寫敏感的 px 寫法：

#如：12PX 代理 12px，這樣工作流程就會忽略此 CSS 屬性，不進行單位轉換


#
→