以前制作手機頁面時，總是很迷茫，不知從何着手，頁面也不知如何處理。會用一些百分比啊，媒體查詢啊，還有就是目測了，但是各種手機端的屏幕適配是個老大難的問題，沒有做到百分百兼容的。自從發現了rem這個好東西，並且聽了一位有經驗同事的講解，頓時豁然開朗，現在對於手機端的頁面開發，可以說胸中有一點丘壑了。rem最能打動我的地方在於，他不會改變原來在PC端的代碼書寫習慣，只是把計量單位換了一下，所以迫不及待的擁抱他了！
具體用法貼出如下：
1、html文檔（當然是html5）的頭部添加一個meta標簽聲明：
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
其作用是讓當前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，因為實在太小，這個還得實際檢驗一下。
以上就是基本用法，當然了，手機端的開發，根據實際頁面的復雜程度，會有各種意想不到的問題，不會像上面寫的就這么簡單，所以，還是要多多練習，積累實戰經驗。