前提：
1、使用rem的前提是首先要設置好頁面的根節點的大小：
<script>
(function(){
var html = document.documentElement;
var hWidth = html.getBoundingClientRect().width;
html.style.fontSize = hWidth/16 + "px";
})()
</script>
2、設置好根節點大小后，在css文件中直接設置rem值，這樣頁面中的布局就會隨着窗口的大小而自適應。但是我們自己去計算rem值會很麻煩，所以出現了less編譯工具考拉。
3、新建文件夾，將less和css文件同時放在這個文件夾，在less文件中如下聲明，如果設計稿是640px的寬度，那么1rem相當於40px。這樣就可以直接按照設計稿的px值來寫:640px寫成640/@r，：
考拉使用方法：
1、 安裝完考拉后，打開考拉，會看到這個頁面：
2、 然后將less和css文件同時拖到這里（注意less和css文件必須放在同一文件夾下）：
3、 點擊less文件，右側自動合並的選項，點擊Compile：
4、 css文件也重復上一步的操作。
5、 然后在編輯器里面看less和css文件，在less里面直接按照設計稿上的值設置寬高，就能自動將這個值編譯到css文件里面的rem值了：
PS:由於兼容問題，rem只適合於移動端開發，而且rem值很小的時候，盡量使用px值，上次出現一種情況就是，本來1px的邊框，換算成rem后變成0.0003這種很小的數字，導致在小屏手機比如320的iphone5s上邊框消失，所以還是視具體情況而定到底使用rem還是px吧~