rem 自適應

　最近在寫一個關於小說閱讀的webApp，因爲沒有借用任何框架，因此不少底層的內容都須要本身去解決，幸虧的是此次只是關於移動端的內容，還不至於去向着jquery的方向碼代碼。言歸正傳，前幾天在處理底色切換的時候，因爲須要作到自適應即盒子的高度隨着盒子的寬度變化，各類找資料發現了3中比較典型的解決辦法，具體請點下面連接：

　　　　　移動端佈局：寫一個自適應的正方形盒子

　　而也從這些解決辦法中學習到了vw和vh的使用，今後就對vw和vh愛不釋手了，想着如今反正寫的是一個移動端的網頁不須要去考慮神馬兼容性吧，但是在昨晚悲催的經過UC瀏覽器真機測試，發現真有不兼容的。。

　　

　　不兼容只好去找替代品了啊，早就據說過rem的大名，確卻沒有真正的使用過，此次就讓咱們好好的瞭解一下吧！

Question One:rem是什麼？

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

Question Two:rem有神馬優勢？

　　rem能等比例適配全部屏幕。 rem是經過根元素進行適配的，網頁中的根元素指的是html咱們經過設置html的字體大小就能夠控制rem的大小。舉個例子：

html{
    font-size:20px;
}
.btn {
    width: 6rem;
    height: 3rem;
    line-height: 3rem;
    font-size: 1.2rem;
    display: inline-block;
    background: #06c;
    color: #fff;
    border-radius: .5rem;
    text-decoration: none;
    text-align: center;    
}

　　我把html設置成10px是爲了方便咱們計算，爲何6rem等於60px。若是這個時候咱們的.btn的樣式不變，咱們再改變html的font-size的值，看看按鈕發生上面變化:

html{
    font-size:40px;
}

　　上面的width，height變成了上面結果的兩倍，咱們只改變了html的font-size，但.btn樣式的width,height的rem設置的屬性不變的狀況下就改變了按鈕在web中的大小。

　　其實從上面兩個案例中咱們就能夠計算出1px多少rem:

　　第一個例子：

　　　　120px = 6rem * 20px(根元素設置大值)

　　第二個例子：

　　　　240px = 6rem * 40px(根元素設置大值)

　　推算出：

　　　　10px = 1rem 在根元素（font-size = 10px的時候）；

　　　　20px = 1rem 在根元素（font-size = 20px的時候）；

　　　　40px = 1rem 在根元素（font-size = 40px的時候）；

　　在上面兩個例子中咱們發現第一個案例按鈕是等比例放大到第二個按鈕，html font-size的改變就會致使按鈕的大小發生改變，咱們並不須要改變先前給按鈕設置的寬度和高度，其實這就是咱們最想看到的。

Question Three:rem須要怎麼用？

　　由於是要計算rem的值，因此咱們前端在看到設計圖量尺寸的時候會去計算下這個東西，須要花費一些時間，因此提供了Sass（不知道的本身去百度）和Less（不知道的本身去百度）相對變量的代碼，

　　Sass相對變量地址：Sass相對變量

　　Less相對變量地址：Less相對變量

手機自適應代碼：

viewport標籤：

<meta name="viewport"content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui"/>

JavaScript代碼：

<script>
    !function (win) {

        function resize() {
            var domWidth = domEle.getBoundingClientRect().width;
            if (domWidth / v > 540) {
                domWidth = 540 * v;
            }
            win.rem = domWidth / 16;
            domEle.style.fontSize = win.rem + "px";
        }

        var v,
            initial_scale,
            timeCode,
            dom = win.document,
            domEle = dom.documentElement,
            viewport = dom.querySelector('meta[name="viewport"]'),
            flexible = dom.querySelector('meta[name="flexible"]');

        if (viewport){
            //viewport：<meta name="viewport"content="initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5,user-scalable=no,minimal-ui"/>

            var o = viewport.getAttribute("content").match(/initial\-scale=(["']?)([\d\.]+)\1?/);

            if (o) {

                initial_scale = parseFloat(o[2]);
                v = parseInt(1 / initial_scale);
            }
        }
        else{
            if (flexible) {
                var o = flexible.getAttribute("content").match(/initial\-dpr=(["']?)([\d\.]+)\1?/);
                if (o) {
                    v = parseFloat(o[2]);
                    initial_scale = parseFloat((1 / v).toFixed(2))
                }
            }
        }
        if (!v && !initial_scale) {
            var n = (win.navigator.appVersion.match(/android/gi), win.navigator.appVersion.match(/iphone/gi));
            v = win.devicePixelRatio;
            v = n ? v >= 3 ? 3 : v >= 2 ? 2 : 1 : 1, initial_scale = 1 / v
        }
        //沒有viewport標籤的狀況下
        if (domEle.setAttribute("data-dpr", v), !viewport) {
            if (viewport = dom.createElement("meta"),
                    viewport.setAttribute("name", "viewport"),
                    viewport.setAttribute("content", "initial-scale=" + initial_scale + 
                    ",maximum-scale=" + initial_scale + ", minimum-scale=" + initial_scale + 
                    ",user-scalable=no"),
                    domEle.firstElementChild
            ) {
                domEle.firstElementChild.appendChild(viewport)
            } else {
                var m = dom.createElement("div");
                m.appendChild(viewport), dom.write(m.innerHTML)
            }
        }
        win.dpr = v;

        win.addEventListener("resize", function () {
            clearTimeout(timeCode), timeCode = setTimeout(resize, 300)
        }, false);

        win.addEventListener("pageshow", function (b) {
            b.persisted && (clearTimeout(timeCode), timeCode = setTimeout(resize, 300))
        }, false);

        /* 完成後就把body的字體設置爲12
         "complete" === dom.readyState ? 
            dom.body.style.fontSize = 12 * v + "px" 
            : dom.addEventListener("DOMContentLoaded", function() {
                dom.body.style.fontSize = 12 * v + "px"
         }, false);
         */
        resize();
    }(window);
</script>

Question Three:瀏覽器對rem的兼容性

　　支持的瀏覽器仍是蠻多的，好比：Mozilla Firefox 3.6+、Apple Safari 5+、Google Chrome、IE9+和Opera11+。整體來講仍是很不錯的，rem的出現能夠說是讓咱們的webPage和webApp如虎添翼。