最近看到這樣一個提問：我有一個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';
})複製程式碼需要注意的地方
一、rem的適用性很有侷限，僅僅只能夠用於只在移動端展示的頁面。如果你的頁面還需要適配到pc端，那麼就老老實實的使用px吧。
二、自己只是用來放在移動端的頁面，別人卻在pc上開啟了，因此可以設定一個html的最大寬度與最小寬度。580px就是手機上瀏覽器的最大寬度。
html {
max-width: 580px;
min-height: 320px;
}複製程式碼三、有的同學可能對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關注我