了解真實的rem手機螢幕適配

rem 作為乙個低調的長度單位，由於手機端網頁的興起，在螢幕適配中得到重用。使用 rem 前端開發者可以很方便的在各種螢幕尺寸下，通過等比縮放的方式達到設計圖要求的效果。

rem 的官方定義『the font size of the root element.』，即以根節點的字型大小作為基準值進行長度計算。一般認為網頁中的根節點是 html 元素，所以採用的方式也是通過設定 html 元素的 font-size 來做螢幕適配，但實際情況真有這麼簡單嗎？

首先我們來看看使用 rem 實現手機螢幕適配的常用方案。

以設計稿的寬度為640px，即：designwidth = 640，同時設定在640px屏寬下 1rem=100px ，即：rem2px = 100。

設定 1rem=100px 的優點不言而喻。前端開發者在切圖、重構頁面的時候，通過直接位移小數點的方式，就可以將ui圖中測量到的 px 值換算成對應的 rem 值，方便快捷。

此外，在 head 中我們還設定了：

viewport 的作用很重要，但不是本文的重點所以不展開，有興趣的同學可以自行搜尋。

先來看看具體方案：

下面四個方案原理都是採用等比縮放的方式 —— 獲得目標螢幕寬度和設計稿寬度的比，作為 rem 的基值（縮放係數），設定為html標籤的字型大小。不同的只是在於效能取捨和書寫習慣。

方案1

@media screen and (min-width: 320px) }
@media screen and (min-width: 360px) }
@media screen and (min-width: 375px) }
@media screen and (min-width: 400px) }
@media screen and (min-width: 414px) }
@media screen and (min-width: 440px) }
@media screen and (min-width: 480px) }
@media screen and (min-width: 520px) }
@media screen and (min-width: 560px) }
@media screen and (min-width: 600px) }
@media screen and (min-width: 640px) }
@media screen and (min-width: 680px) }
@media screen and (min-width: 720px) }
@media screen and (min-width: 760px) }
@media screen and (min-width: 800px) }
@media screen and (min-width: 960px) }

方案2

@media screen and (min-width: 320px) }
@media screen and (min-width: 360px) }
@media screen and (min-width: 375px) }
@media screen and (min-width: 400px) }
@media screen and (min-width: 414px) }
@media screen and (min-width: 440px) }
@media screen and (min-width: 480px) }
@media screen and (min-width: 520px) }
@media screen and (min-width: 560px) }
@media screen and (min-width: 600px) }
@media screen and (min-width: 640px) }
@media screen and (min-width: 680px) }
@media screen and (min-width: 720px) }
@media screen and (min-width: 760px) }
@media screen and (min-width: 800px) }
@media screen and (min-width: 960px) }

方案3

var designwidth = 640, rem2px = 100
;document.documentelement.style.fontsize =((window.innerwidth / designwidth) * rem2px) + '
px';

方案4

var designwidth = 640, rem2px = 100
;document.documentelement.style.fontsize =((((window.innerwidth / designwidth) * rem2px) / 16) * 100) + '
%';

為了更避免理解上的混亂，我在上面js的**中加了 ( ) ，實際**中是不需要的。

詳細分析一下，rem 和 px 直接的轉換公式可以寫為：

1rem= 1* htmlfontsize

htmlfontsize 為 html 元素的字型大小。

首先來看方案1中，在屏寬為640px情況下的設定：

@media screen and(min-width: 640px)}

可以很明顯的表現出這一點 1rem = 1 * 100px ，同我們最初的設定。那麼我們要得到其它螢幕大小的 htmlfontsize 值要怎麼辦。很簡單如方案3，因為我們的採用等比縮放的方式適配，所以計算目標螢幕寬度和設計稿的寬度的比即可：

window.innerwidth/ designwidth* rem2px+ 'px'

由於瀏覽器預設字型大小為 16px，所以當我們使用百分比作為根節點 html 的字型大小時，即html元素的font-size值設定為乙個百分比值，rem 的計算方式就會改為：

defaultfontsize= 16px

1rem= 1* htmlfontsize* defaultfontsize

如方案2中，在屏寬為640px情況下的設定：

@media screen and(min-width: 640px)}

應用上面的公式：

1rem= 1* 625% * 16px

其中：625% * 16= 6.25* 16= 100

所以：1rem= 1* 100px

同樣的可以得到所有螢幕大小下，html 的 font-size 值的計算公式，即為方案4：

window.innerwidth/ designwidth* rem2px/ 16* 100+ '%'

通過方案3和方案4的公式，就可以很方便的生成方案1和方案2中的css。

了解真實的rem手機螢幕適配

rn適配手機螢幕

手機端螢幕適配

設定字根，配合rem適配（多尺寸螢幕的適配）

了解真實的rem手機螢幕適配

rn適配手機螢幕

手機端螢幕適配

設定字根，配合rem適配（多尺寸螢幕的適配）

相關推薦