完整的REM佈局的工做流程與規範

rem從去年的手淘雙11開始火起來以後一直就想去使用，可是苦於學習途徑有限，工做任務也比較繁忙致使一度延後。

那麼如今對相關知識的學習與初步的項目實踐以後，在這裏記錄一下使用rem解決各屏幕適配問題。廢話很少說~~一步步來

 

首先是從設計師那邊拿過來的設計稿多是640，或是750的，這些都不重要。

而後咱們要引用一個JS，adaptive.js 

github地址：https://github.com/finance-sh/adaptive，先從這兒引用一段文字：

最最理想的解決方案固然是設計圖和手機屏幕的像素點一一對應，就像咱們在PC端所作的同樣。拿750px寬的設計圖來講，若是手機屏幕的水平分辨率是750px，那麼這樣是最理想最完美的，對於水平分辨率不是750px的屏幕呢？這個時候咱們把設計圖進行縮放，使其寬度恰好與屏幕的分辨率相等，便是等比例縮放設計圖，使其寬度恰好覆蓋手機屏幕。
若是咱們使用<meta content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,minimal-ui" name="viewport">這種經常使用標籤，視覺同窗常常會抱怨1px過粗的問題，這個時候咱們須要縮放viewport來達到真正還原1px的效果。
開發的便捷性也是理想解決方案的一部分，大部分rem解決方案，是把設計圖分紅100份，1rem等於10份，總寬度10rem。若是設計圖是750px，1rem就等於75px，切圖的時候須要將px轉換爲rem,這個時候就須要用設計圖的px值除以75獲得rem的值，獲得的rem值基本都是帶幾位小數的，雖然咱們能夠用less，sass這類css預處理語言來統一處理，可是若是咱們讓1rem等於100px，在切圖的時候就能夠更加快速方便了。好比設計圖寬度爲100px，css則書寫爲1rem便可。
要實現1rem等於設計圖100px，頁面的總的寬度就不是10rem了，而是隨設計圖的寬度而變化了。拿750px的設計圖來講，總的寬度就是7.5rem。咱們先根據設備像素比來縮放viewport，佈局視口的寬度就調整好了，佈局視口一樣的寬度是7.5rem，咱們就能夠計算出html根元素的像素值，這樣就大功告成了。
若是是文字，咱們也建議使用rem。

對於iphone的retina高清顯示屏，基本版本(adaptive.js)咱們作了縮放處理，以達到最佳顯示效果。 對於快速開發版本(adaptive-version2.js),viewport的width等於設備寬度，不會縮放
若是隻是webview裏，可使用 adaptive-version3.js 在IOS和安卓下都會縮放，不然仍是謹慎使用此版本，抱歉

至於這個JS主要用來根據當前分辨率動態設置html的font-size的值以及viewport。

 

開始根據PSD在JS裏進行配置，我把這一塊的配置直接放到JS文件裏了，加載完就能夠執行，實際項目中以下：

/*當即調用*/
window['adaptive'].desinWidth = 750;// 設計圖寬度
//window['adaptive'].baseFont = ".28rem";// 默認body字體大小,在這裏咱們不要設置固定默認字體大小，故將對應代碼註釋，經過body設置 .28rem設置字體大小
window['adaptive'].init();// 調用初始化方法

設置完了以後咱們把基數（製做頁面的時候一個參考項）定爲100px（別問爲何，由於好用，相比其餘的基數，我更願意直接簡單的縮進兩位）。

實際「堆磚」過程中是這個樣子的。設計稿上咱們看到一個div，用之前的寫法假設是這樣

div{

　　width:200px;

　　height:150px;

　　margin:44px auto;

　　padding:0 10px;　

}

那麼你如今須要這樣寫

div{

　　width:2rem;

　　height:1.5rem;

　　margin: .44rem auto;

　　padding:0 .1rem;

}

寫完了，就這樣就能夠了，那你原本的px值除以100,就是你要的rem的值。

針對1px的border問題，直接寫1px就行了，由於就算你在縮小也小不過1px。

好了別看了，趕忙拿個設計稿來玩玩，再測一下不一樣的設備顯示狀況。

 

仍是引用上面的那個部分兼容性解決方案：

1，部分chrome版本局部刷新時字體過大問題
插入數據後調用方法：
window.adaptive.reflow();
2，後端模板渲染是剛開始字體過大問題
能夠給body設置一個初始字體大小值，就不會出現此問題了

最後最後附上js代碼。個人修改版本，刪掉了設置body字體大小功能(由於不想每一處的字體都得本身去定義)：

!function(e, t) {
    function i() {
        o = 1,
        e.devicePixelRatioValue = o,
        s = 1 / o;
        var t = a.createElement("meta");
        if (t.setAttribute("name", "viewport"), t.setAttribute("content", "initial-scale=" + s + ", maximum-scale=" + s + ", minimum-scale=" + s + ", user-scalable=no"), d.firstElementChild) d.firstElementChild.appendChild(t);
        else {
            var i = a.createElement("div");
            i.appendChild(t),
            a.write(i.innerHTML)
        }
    }
    function n() {
        var e = Math.min(d.getBoundingClientRect().width, 540);
        r = 100 * e / t.desinWidth,
        d.style.fontSize = r + "px"
    }
    var a = e.document,
    d = a.documentElement,
    o = (e.devicePixelRatio, 1),
    s = 1;
    i();
    var l, r = 100;
    t.desinWidth = 640,
    t.baseFont = 18,
    t.init = function() {
        e.addEventListener("resize",
        function() {
            clearTimeout(l),
            l = setTimeout(n, 300)
        },
        !1),
        e.addEventListener("pageshow",
        function(e) {
            e.persisted && (clearTimeout(l), l = setTimeout(n, 300))
        },
        !1),
        "complete" === a.readyState ? a.body.style.fontSize = t.baseFont * o + "px": a.addEventListener("DOMContentLoaded",
        function() {
            //a.body.style.fontSize = t.baseFont * o + "px"
        },
        !1),
        n(),
        d.setAttribute("data-dpr", o)
    }
} (window, window.adaptive || (window.adaptive = {}));
/*當即調用*/
window['adaptive'].desinWidth = 750;// 設計圖寬度
//window['adaptive'].baseFont = ".28rem";// 默認body字體大小,在這裏咱們不要設置固定默認字體大小，故將對應代碼註釋，經過body設置 .28rem設置字體大小
window['adaptive'].init();// 調用初始化方法

 

 

有些坑可能沒踩到，等我踩到了再及時更新哈。

 

有涵養的人都會帶上出處，對吧