在Web開發中使用什麼單位來定義頁面的字型大小，至今天為止都還在激烈的爭論著，有人說px好，有人說em的優點多，,也有人說百分比方便，但說到底，都是各有利弊，但在開發中又不得不用。那麼有什麼好的解決方案呢，說到這就要進入本文的正題 CSS3中引入的單位rem。

那麼rem是什麼？

 rem（font size of the root element）是指相對於根元素的字型大小的單位。簡單的說它就是一個相對單位。看到rem大家一定會想起em單位，em（font size of the element）是指相對於父元素的字型大小的單位。它們之間其實很相似，只不過一個計算的規則是依賴根元素一個是依賴父元素計算。

rem的優點

        這個單位與em有什麼區別呢？區別在於使用rem為元素設定字型大小時，仍然是相對大小，但相對的知識HTML根元素。這個單位可謂集相對大小和絕對大小的優點於一身，通過它可以做到只修改根元素就成比例地調整所有字型大小。         em單位是相對於父節點的font-size，會有一些組合的問題，而rem是相對於根節點（或者是html節點），也就是說你可以在html節點定義一個單獨的字型大小，然後其他元素使用rem相對於這個字型的百分比進行設定，這樣就意味著，我們只需要在根元素確定一個參考值，在根元素中設定多大的字型，這完全可以根據自己的需求

瀏覽器相容性

        除了IE6-8無法相容外幾乎適用於市面上所有瀏覽器。

rem的使用

        在我看來rem的主要作用就是為了讓元素在不同屏寬下相對於裝置等比例顯示，在實際開發中，我們可以按照一個標準尺寸進行設計，使用rem單位進行網頁的製作，然後控制根節點的font-size實現完美響應。

好了上面全是廢話，下面我給出兩種方案

1.統計自己網站有哪些主流的螢幕裝置，然後去針對那些裝置去做media query設定根節點html的font-size實現適配，例如下面這樣：

html {
    font-size : 20px;
}
@media only screen and (min-width: 401px){
    html {
        font-size: 25px !important;
    }
}
@media only screen and (min-width: 428px){
    html {
        font-size: 26.75px !important;
    }
}
@media only screen and (min-width: 481px){
    html {
        font-size: 30px !important; 
    }
}
@media only screen and (min-width: 569px){
    html {
        font-size: 35px !important; 
    }
}
@media only screen and (min-width: 641px){
    html {
        font-size: 40px !important; 
    }
}
 

2.通過JS實現全適配

function adaptable(){
    var pw = $(window).width();
    var size = pw*16/350;
    $('html').css('font-size',size+'px');
}

方案一當然是不能所有裝置全適配，但是用JS可以實現全適配。具體用哪個就要根據自己的實際工作場景去定了。