談談rem

用rem已久可是對於它的理解彷佛一直都有誤差，使用的時候多采用的是html的font-size:62.5%;而後按照1rem=10px這樣來使用。因此我一直不明白，這個rem到底哪裏是相對單位了，也不明白它跟px的不一樣點又在哪裏。迷惑了很久，而後就在今天，我翻到了一篇博客才知道本身用的多麼膚淺。好吧，再也不廢話了，咱們先來看看，rem究竟是什麼

rem是什麼？

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

咱們不由要問一下，這個根元素指的是什麼呢？問得好，根元素指的是html。回想我以前喜歡把html的font-size設置成62.5%，是用瀏覽器的默認字號16px*62.5%=10;而後頁面中的元素按照1rem=10px來計算，但其實咱們能夠直接給html的font-size一個定值，爲了計算方便咱們首選確定是10px，但這樣是很差的。由於chrome不支持中文字體小於12px，因此會致使當計算小於12px的時候，會默認取12px去計算，致使中文版chrome的rem計算不許確。因此咱們能夠取個20px之流。

rem有什麼好？

笨！都告訴你了，rem是相對於根元素字體的大小，那麼當根元素的字體大小適應不一樣的移動端發生改變，元素的大小是否是也都跟着變？答案固然是確定的啊！

那麼咱們應該怎麼變？以及爲何要變？

首先咱們來回答爲何要變的問題

目前的佈局方式也就是我以前很喜歡的一種佈局方式是：流式佈局即經過百分比來定義寬度，可是高度歇斯，因此這樣的話在比較大或者比較小的屏幕中會出現按鈕過矮或者過低的狀況。在我看來，其實也還好，畢竟是本身寫的。。。不過我確實沒怎麼考慮過視覺設計師的想法就對了。。。

還有一些方法寬度寫死之類我沒有試過，感受上也不是很好的實現方式

嗯，因此我認爲流式佈局+rem是個不錯的實現方式

如何使用rem

如何使用的精髓其實在如何動態修改html的font-size，下面獻上一段代碼

(function (doc, win) {
    var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
        };

    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
    doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

　　這段代碼裏決定性的部分在於 20 * （clientWidth/320）,20就是你設定的html的font-size,而320則是你切圖時的參考頁面寬度

　　還有一種動態修改頁面html的font-size的方法就是media-query了，可是我始終不喜歡media-query，屏幕設備辣麼多，難道你每一個都要寫？就算你如今每一個都寫了，出了新的屏幕設備你是否是還得更新維護代碼？這是治標不治本的典範。

兼容性？

我就知道下一步大家就要問這個了，話很少說，上圖。

放心了吧~

嗯，就寫這麼多，而後附上原博客地址 http://isux.tencent.com/web-app-rem.html