REM：web app適配的祕密武器

最近看到這樣一個提問：我有一個750 x 1500尺寸的設計稿，設計稿上有一個150 x 50的按鈕，那麼在寫頁面佈局的時候，應該如何肯定按鈕的尺寸呢？。大多數同窗在回答的時候提到了rem。這讓我對rem這個單位充滿了好奇。好吧，暫時不太熟。

因而問題來了，rem究竟是什麼？rem是爲了解決什麼問題而存在的？rem可以給咱們帶來什麼樣的便利？帶着這樣的問題，我去學習了不少rem的文章，而後恰好工做中有一個移動端頁面的需求要作，就嘗試使用rem完成了一個小小的頁面適配。你們能夠點擊這裏，查看rem適配demo。

建議你們在chrome的device module下打開，經過切換不一樣手機的模擬器來查看不一樣尺寸下的區別。

rem是什麼？

rem是一個相對於根元素字體大小的css單位。與px同樣，他能夠用來設置字體大小，也能夠用來設置長度單位。相對於根元素字體大小是什麼意思？

舉個栗子。在頁面中，html元素是根元素，所以咱們首先給html設置一個字體大小

html { font-size: 100px; }複製代碼

因而，在整個頁面中，就有這樣的換算公式 ： 1rem = 100px

因此若是一個按鈕，有以下的css樣式，就等同於他的寬爲100px，高50px.

btn { width: 1rem; height: 0.5rem; }複製代碼

好像這就是rem全部的真相了。

！！！什麼？這就完了？這和px有什麼區別？對啊，這和px原本就沒有特別的區別，不就是一個度量單位嘛！因此提問的那個同窗拿着750x1500設計圖來問，150x50的按鈕應該在頁面裏面寫什麼尺寸，用px就應該寫 75x25，用rem就是 0.75 x 0.25.

但是很顯然，rem還有一點點別的特性。

rem是爲了解決什麼問題而存在的？

以iphone各類手機的尺寸來講，iPhone4,5 寬度320px，iPhone6 375px，iPhone6 plus 414px. 若是一個按鈕，固定一個75x25的尺寸，那麼就必然會致使在不一樣尺寸下的相對大小不同。這帶來的問題就在於會直接影響到設計的美觀，可能在iPhone6下，一個完美的設計圖，到了iPhone5,就變得low不少。 由於，爲了讓頁面元素的尺寸可以在設備寬度變化的時候也跟着變化，rem就出現了。

咱們已經知道，rem的相對大小跟html元素的字體大小有關係。使用rem適配的原理就是咱們只須要在設備寬度大小變化的時候，調整html的字體大小，那麼頁面上全部使用rem單位的元素都會相應的變化。 這也是rem與px最大的區別。

有css與js兩種方式來調整html元素大小的值。

css方式

html { font-size: calc(100vw / 3.75) }複製代碼

100vw表示設備寬度，除以3.75這裏是以iphone6 的寬度375px爲標準，爲了保證html的字體大小爲100px。這樣咱們在換算的時候，1px 就是0.01rem，就很容易計算。

由於chrome下最小字體大小爲12px，因此不能把html的font-size設置成1px或者10px，100px是咱們最好的選擇。

js方式， 原理與css同樣，不過爲了不在一些老舊一點的手機瀏覽器上不支持calc，vm這些屬性，在實際應用中使用js是最好的。

document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
$(window).on('resize', function() {
    document.documentElement.style.fontSize = $(document.documentElement).width()/3.75 + 'px';
})複製代碼

須要注意的地方

1、rem的適用性頗有侷限，僅僅只可以用於只在移動端展現的頁面。若是你的頁面還須要適配到pc端，那麼就老老實實的使用px吧。

2、本身只是用來放在移動端的頁面，別人卻在pc上打開了，所以能夠設置一個html的最大寬度與最小寬度。580px就是手機上瀏覽器的最大寬度。

html {
    max-width: 580px;
    min-height: 320px;
}複製代碼

3、有的同窗可能對web的適配有點誤解。web中作適配並不須要考慮什麼物理像素啊，dpi等等概念。這些應該僅僅只是Android或者ios原生app纔會考慮的問題。這些誤會致使許多搞設計的同窗在給web app作設計的時候，也丟一張1080 x 1920 的設計稿過來，真是愁死人了。

那麼回到這個問題中來，設計稿是750x1500的應該怎麼辦？其實這個還好，750恰好就是375的2倍，iPhone6的寬度。所以量出來的尺寸直接除以2就好了。若是是1080x1920等很大很大的尺寸呢？1.首先保存整張設計稿.jpg 2.新建一個psd，寬度375px，高度1000px(高度能夠高一點，無所謂) 3.將保存的設計稿.jpg丟進去。這樣量出來的頁面元素的尺寸，就是你須要的尺寸。

ps：最好的方法，就是讓設計師用sketch出設計稿。

若是文章對你有幫助，歡迎搜索公衆號isreact關注我