這次我好像才真的明白了CSS Rem字型計算的原理

孤舟蓑翁發表於2021-05-13
CSSREM

背景

如何按照設計稿中標註的尺寸，直接寫頁面的樣式，不再需要px2rem這樣的工具或者人工轉換 ? 只要你明白了rem的計算原理，這個問題的答案超級簡單。

根字型大小計算核心原理

 

裝置的根字型大小 * 全屏比例值 =  裝置的寬度

設計稿的根字型大小 * 全屏比例值 = 設計稿的寬度

這兩個等式中的全屏比例值相等的條件下，在真實裝置上可以高保真地還原設計稿。

 

實戰一下

找了一個藍湖的設計稿，藍湖的設計稿寬度是750px,預設根字型大小是50px。

50px * 全屏比例值 = 750px，這個全屏比例值是15rem

看一段專案中真實裝置的根字型計算程式碼。真實裝置的螢幕寬度是375px,  該公式假設的設計稿根字型大小是100px, 為什麼取100px, 可能是為了計算方便,   按照這樣的前提，計算出來當真實裝置根字型大小是50px的時候，能高保真還原寬度是750px,根字型大小是100px的設計稿

window.scale = document.documentElement.clientWidth / 750;
// 動態設定html的font-size
document.querySelector('html').style.fontSize = `${parseInt(100 * window.scale, 10)}px`;

按照上面我們總結的公式，50px * 全屏比例值 = 375px  真實裝置的全屏比例值是7.5rem，而設計稿全屏比例值是15rem,  全屏比例值不相等。所以在寫頁面的樣式的時候，沒法直接按照設計稿上標註的尺寸寫。

 

 

如何調整?

按照根字型大小計算公式，要麼設計稿的根字型大小適配程式碼中的設定的設計稿根字型, 要麼程式碼中的設定的設計稿根字型適配設計稿中的根字型。兩者不能脫節。相對而言，調整設計稿的根字型大小更合理，頻繁修改程式碼中預設的根字型大小，不可取。

 

提煉

如果真實裝置的全屏尺寸不是375px, 而是下面這些，那麼真實裝置的根字型如何計算。以320px寬度的裝置為例，

裝置根字型大小 * 同等全屏比例值 = 320px

設計稿的根字型大小 * 同等全屏比例值 = 750px       

設計稿的根字型大小是100px，全屏比例值計算出來是7.5

那麼320px的裝置，根字型大小應該為 320 ÷ 7.5 ≈ 42.66px

 

 由計算原理可知，只要針對某一種機型做好設計稿的適配， 在其它機型上，設計稿肯定也是按等比例展示的。推薦使用375px的裝置寬度與設計稿進行適配，計算方便。

容易混淆的地方

1.不理解程式碼中計算真實裝置的根字型大小時，為什麼要乘以100，對於根字型計算預設的條件，不明原理。

2.容易跟dpr(裝置畫素比)混淆在一起，牽強地解釋根字型的計算，有礙對根字型計算的理解。dpr是邏輯畫素和真實物理裝置畫素之間的對應關係，dpr引發的問題是在css中明明寫的邊距寬度是1px, 在裝置上看起來比較粗，好像有2~3px那麼寬。可通過指令碼設定dpr或者transform: scale+偽元素的方式修正。

 

相關文章