背景
如何按照設計稿中標注的尺寸，直接寫頁面的樣式，不再需要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+偽元素的方式修正。