目錄
- 1 什么是 rem
- 2 rem 適配算法
- 3 適配舉例
- 4 實際開發(fā)
1 什么是 rem
rem (font size of the root element) 表示的是根元素的字體大小，如下：
html {
font-size: 16px;
}
根元素字體大小為 16px，那么 1rem = 16px。
2 rem 適配算法
rem 作為一個長度單位，除了可以作為字體大小來設置，還可以設置 html 的任何元素的尺寸。一般來說，移動設備大小不一，同一個頁面元素要在不同的設備上進行適配，以保證視覺效果。
一個總的原則是 將元素的尺寸大小基于設備的屏幕寬度進行重新計算 。我們設屏幕寬度為 W (單位：px)；該設備 1 個單位 rem 的值為 R (單位：px)；目標元素要設置的尺寸大?。ū热缭氐拈L或者寬）為 Sp (單位：px) 或 Sr (單位：rem)。
首先，W 和 Sp 都有一個初始值，它們的值等于設計師給定的設計圖標注。一般來說設計師會根據(jù)某一種設備的屏幕尺寸來進行設計，比如 iPhone6，其屏幕寬度為 375px。假設初始值分別為：w s，于是有：
第一步，初始化 W 和 Sp；
W = w // =375px for iPhone6
Sp = s // 設計稿實際標注的值
第二步，計算 R 以及 Sr；
R = W / 10
Sr = Sp / R // 此為 Sr 的最終值
第三步，在不同尺寸設備上重新計算 R，并將其值設置為根元素的字體大小，并更新 Sp
R = W / 10 // 同時設置：document.getElementsByTagName('html')[0].style.fontSize = R + 'px'
Sp = Sr * R // 重新計算出 px 值
注意：
-
為什么
R的計算是屏幕寬度除以 10 呢？ 其實理論上直接設置R = W也是可以的，但是這樣一來，默認的字體大小就顯得過大，除以 10 可以當做是一種約定俗成的規(guī)定。 -
實際上
Sp的計算并不是必要的。 當在第二步計算出Sr之后，就可以直接將目標元素的尺寸設置為element.style.width/height = Sr + 'rem'，之所以每次計算Sp是為了便于說明它的實際像素值。
3 適配舉例
作為以上算法的一個例子。我們假設設計稿是按照 iPhone6 的尺寸給出的，某個 div 元素的寬度在設計中標注為 60px，于是：
第一步：
W = 375
Sp = 60
第二步：
R = W / 10 = 375 / 10 = 37.5
Sr = Sp / R = 60 / 37.5 = 1.6
這一步，我們將直接設置 div 的寬度為 1.6rem 就可以了。
第三步，我們假設新的需要適配的設備為 iPhone6 Plus，寬度為 414px：
R = W / 10 = 414 / 10 = 41.4
Sp = Sr * R = 1.6 * 41.4 = 66.24
所以在 iPhone6 Plus 上，其寬度實際為 66.24px。
4 實際開發(fā)
在實際開發(fā)中，我們要執(zhí)行以下兩步：
- 根據(jù)設計稿，我們要先完成算法的前兩步。即按照設計基于的設備，計算出一個初始的
R值，然后將每個目標元素的尺寸換算成Sr； - 最后，在頁面渲染之前，需要重新計算根元素的字體大小，即
W：
document.getElementsByTagName('html')[0].style.fontSize = window.innerWidth / 10 + 'px';
以上的第一步往往比較繁瑣，因為每一個元素都需要手動換算成 rem 值。一種可行的辦法是，在 css 的實際設置中，仍然按照設計稿給出的像素值直接設置，然后寫一個腳本程序，其功能是將所有的 css 文件中的尺寸大小都按照上述的算法換算成對應的 Sr 值。在測試頁面之前，先執(zhí)行該腳本即可。
實際上，已經(jīng)有相應的插件實現(xiàn)了此腳本的功能了—— PxToRem，我們可以在 webpack 的 postcss-loader 里包含這個插件，具體的用法，可以參考 webpack 官網(wǎng)指南以及 PxToRem 插件說明
加入技術(shù)交流群
準備建立一個技術(shù)交流群，大家可以討論技術(shù)、內(nèi)推工作、互相幫助。因為二維碼容易失效，個人微信號加太多容易被封，所以請大家先關(guān)注公眾號——小舍，然后在公眾號給我發(fā)送消息，我拉大家入群。
