以前制作手機頁面時，總是很迷茫，不知從何着手，頁面也不知如何處理。會用一些百分比啊，媒體查詢啊，還有就是目測了，但是各種手機端的螢幕适配是個老大難的問題，沒有做到百分百相容的。自從發現了rem這個好東西，并且聽了一位有經驗同僚的講解，頓時豁然開朗，現在對于手機端的頁面開發，可以說胸中有一點丘壑了。rem最能打動我的地方在于，他不會改變原來在PC端的代碼書寫習慣，隻是把計量機關換了一下，是以迫不及待的擁抱他了！
具體用法貼出如下：
1、html文檔(當然是html5)的頭部添加一個meta标簽聲明：
其作用是讓目前viewport的寬度等于裝置的寬度，同時不允許使用者手動縮放。
2、引入最新版本的jQuery庫檔案
3、加入下面這段jquery代碼：
var deviceWidth=$(window).outerWidth();
if(deviceWidth>640){
$("html").css("font-size","100px");
}else{
$("html").css("font-size",deviceWidth/640*100+‘px‘);
}
代碼一看就懂，意思是螢幕寬度大于640時，設定rem的基準為100px，反之，則為螢幕寬度除以640再乘上100。這樣就實作了響應式效果，不用費力的寫媒體查詢了。
4、拿到設計效果圖切好需要的圖檔
5、按制作PC端頁面的方式書寫頁面，把px換成rem，因為前面定的1rem=100px,是以原來以px為機關的資料全部向前移動兩位小數點。
6、背景圖的設定：背景圖引入後，必須加上background-size：橫向rem，縱向rem，其中的數字就是切圖的尺寸，換算成rem，這個尤為重要，隻要有背景圖就一定要加上，平鋪的背景圖(repeat)，也是同樣的寫切下來那部分的數值。
7、特殊注意：字号font-size，邊框大小、圓角邊框的大小，這些最好還是用px來寫。
這裡我經過實際檢驗，其實字号用px和rem都可以，但是1px的邊框就不要寫成0.01rem了，在手機上根本看不到，是以還是寫border：1px solid #顔色。
是不是小于0.1 rem的數字就不要用了，用回px，因為實在太小，這個還得實際檢驗一下。
以上就是基本用法，當然了，手機端的開發，根據實際頁面的複雜程度，會有各種意想不到的問題，不會像上面寫的就這麼簡單，是以，還是要多多練習，積累實戰經驗。